微信小程式自定義導航隱藏和顯示功能

2022-10-06 00:27:26 字數 940 閱讀 2437

微信小程式中不能直接操作window物件,document文件,跟html的樹結構不相同。

實現類似導航的隱藏顯示,如圖效果:

點選網路顯示或隱藏網路中包含的內容。其他類似。

如果是jquery很方便實現,能直接操作document。在微信小程式中實現思路是:在邏輯層定義變數,通過setdata賦值。

方法一:通過變數直接賦值,給每乙個要控制顯示的view定義變數

.wxml **:

檢視容器

基礎內容

表單元件

.js對應**:

data: ,

opentype: function (e) )

}, tigger: function (e) )

} else if (num == 2) )

} else if (num == 3) )

}}通過data-num="1" 這中傳值方式,設定對應的view1的值。

這種方法能夠實現效果,但是在新增了新的view之後需要修改js**,所以不是最優的方法。

方法二:

.wxml **:

網路 上傳、**

jcffvcton bindtap="opentype" data-url="uploadfile">uploadfile

websocket

** www.cppcns.com;

.js對應**:

// index.js

var statusarrs = [false]

page(,

opentype: function (e) )

}, //顯示隱藏

tigger: function (e) )

}})方法二這種方式就簡單實現了不修改js**,新增了新的view也能控制隱藏顯示。

本文標題: 微信小程式自定義導航隱藏和顯示功能

本文位址:

微信小程式 隱藏和顯示自定義的導航

wxml 檢視容器 view movable 基礎內容 icon text progress 表單元件 button checkbox form input label picker textarea js對應 data opentype function e tigger function e e...

微信小程式自定義底部導航tabBar

custom tab bar資料夾要與pages檔案同級,custom tab bar之下的檔案名字為index 官方文件推薦用 fixed 在底部的 cover view cover image 元件渲染樣式,以保證 tabbar 層級相對較高。但是我是在真機除錯時遇到tabbar偶爾消失的bug...

微信小程式如何自定義底部導航

先看一下自定義底部導航 圖1 和未自定義的導航 圖2 效果差距 圖1 圖2如何實現自定義底部導航 建立乙個與pages同級的資料夾,名稱為custom tab bar資料夾名字是規定好的只能叫做這個。建立好這個資料夾之後就是編寫底部導航的內容 5.完成到上一步之後已經可以實現頁面的切換效果了,但是頁...