資訊專(zhuān)欄INFORMATION COLUMN
摘要：我們?cè)诤瘮?shù)中通過(guò)獲取設(shè)備的寬高來(lái)設(shè)置組件高度以及高度為導(dǎo)航欄的高度點(diǎn)擊導(dǎo)航欄切換內(nèi)容點(diǎn)擊切換滑動(dòng)內(nèi)容切換導(dǎo)航欄滑動(dòng)切換可滾動(dòng)區(qū)域滾動(dòng)最底刷新數(shù)據(jù)頁(yè)面上拉觸底事件的處理函數(shù)更新列表一個(gè)漂亮的選項(xiàng)卡就完成了完整案例
選項(xiàng)卡隨處可見(jiàn)，微信小程序中也不例外，下面來(lái)寫(xiě)一個(gè)簡(jiǎn)單的小程序選項(xiàng)卡
思路之前寫(xiě)過(guò)基于swiper的選項(xiàng)卡，在小程序中有swiper組件，毫無(wú)疑問(wèn)這里要用到swiper組件
小程序中的swiper組件有個(gè)問(wèn)題就是不能根據(jù)內(nèi)容自適應(yīng)高度，所以要通過(guò)wx.getSystemInfoSync獲取設(shè)備高度設(shè)置swiper高度
小程序中的swiper組件中swiper-item內(nèi)容超出可視區(qū)后無(wú)法滾動(dòng)顯示，所以這里要用到另一個(gè)組件scroll-view。
小程序中的swiper組件功能還是比較有限的，有待優(yōu)化。
方案 1.首先在js中設(shè)置數(shù)據(jù) data: {
tabs: ["菜單一", "菜單二"],// 導(dǎo)航菜單欄
curIdx:0,// 當(dāng)前導(dǎo)航索引
scrollHeight:0, //滾動(dòng)高度 = 設(shè)備可視區(qū)高度 - 導(dǎo)航欄高度
list:[],// 內(nèi)容區(qū)列表
},
在onLoad函數(shù)中填充數(shù)據(jù)
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
let list=[];
for (let i=1;i<=30;i++){
list.push(i)
}
this.setData({
list: list
});
},
2.在WXML中循環(huán)渲染出導(dǎo)航
3.設(shè)置當(dāng)前活動(dòng)導(dǎo)航樣式{{item}}
/*初始化樣式*/
view, text, picker, input, button, image{
display: flex;
box-sizing: border-box;
}
/* 導(dǎo)航樣式*/
.swiper-tab {
position: relative;
width: 100%;
height: 100rpx;
justify-content: center;
align-items: center;
}
.swiper-tab-item {
background-color: #f3f3f3;
width: 50%;
height: 80rpx;
justify-content: center;
align-items: center;
}
.swiper-active{
background-color: rgb(129, 190, 247);
color: #fff;
}
4.內(nèi)容顯示區(qū)
內(nèi)容顯示區(qū)使用swiper組件，swiper-item個(gè)數(shù)要與tabs數(shù)組長(zhǎng)度 一致
內(nèi)容一{{item}} 內(nèi)容二
小程序中的swiper組件有個(gè)問(wèn)題就是不能根據(jù)內(nèi)容自適應(yīng)高度，所以要通過(guò)[wx.getSystemInfoSync][4]獲取設(shè)備高度設(shè)置swiper高度
小程序中的swiper組件中swiper-item內(nèi)容超出可視區(qū)后無(wú)法滾動(dòng)顯示，所以這里要用到另一個(gè)組件[scroll-view][5]。
我們?cè)趏nShow函數(shù)中通過(guò)getSystemInfoSync獲取設(shè)備的寬高來(lái)設(shè)置swiper組件高度以及scroll-view高度
onShow: function () {
// 100為導(dǎo)航欄swiper-tab 的高度
this.setData({
scrollHeight: wx.getSystemInfoSync().windowHeight - (wx.getSystemInfoSync().windowWidth / 750 * 100),
})
},
5.點(diǎn)擊導(dǎo)航欄切換內(nèi)容
//點(diǎn)擊切換
clickTab: function (e) {
this.setData({
curIdx: e.currentTarget.dataset.current
})
},
6.滑動(dòng)內(nèi)容切換導(dǎo)航欄
//滑動(dòng)切換
swiperTab: function (e) {
this.setData({
curIdx: e.detail.current
});
},
7.可滾動(dòng)區(qū)域滾動(dòng)最底刷新數(shù)據(jù)
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
// 更新列表
let list = this.data.list;
console.log(list)
let lens = list.length
for (let i = lens; i < lens+30; i++) {
list.push(i)
}
this.setData({
list: list
});
},
一個(gè)漂亮的選項(xiàng)卡就完成了
完整案例
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97525.html
摘要：利用這篇教程存儲(chǔ)一些常用的微信小程序開(kāi)發(fā)技巧，方便查找。但是第一，微信小程序是國(guó)內(nèi)的，有中文文檔，雖然它的文檔說(shuō)明有點(diǎn)坑，但好歹有文檔，閱讀理解對(duì)小伙伴們來(lái)說(shuō)不是問(wèn)題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺(jué)得本文還不錯(cuò)，記得給個(gè)...
摘要：利用這篇教程存儲(chǔ)一些常用的微信小程序開(kāi)發(fā)技巧，方便查找。但是第一，微信小程序是國(guó)內(nèi)的，有中文文檔，雖然它的文檔說(shuō)明有點(diǎn)坑，但好歹有文檔，閱讀理解對(duì)小伙伴們來(lái)說(shuō)不是問(wèn)題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺(jué)得本文還不錯(cuò)，記得給個(gè)...
摘要：利用這篇教程存儲(chǔ)一些常用的微信小程序開(kāi)發(fā)技巧，方便查找。但是第一，微信小程序是國(guó)內(nèi)的，有中文文檔，雖然它的文檔說(shuō)明有點(diǎn)坑，但好歹有文檔，閱讀理解對(duì)小伙伴們來(lái)說(shuō)不是問(wèn)題。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 ?Hello 小伙伴們，如果覺(jué)得本文還不錯(cuò)，記得給個(gè)...
摘要：倉(cāng)庫(kù)打開(kāi)微信小程序官方開(kāi)發(fā)文檔，最好全篇看一遍，基本上就會(huì)了。 https://github.com/dingyiming... 倉(cāng)庫(kù)：https://github.com/dingyiming... 打開(kāi)微信小程序官方開(kāi)發(fā)文檔，最好全篇看一遍，基本上就會(huì)了。 點(diǎn)擊文檔中 工具 選項(xiàng)卡中 下載工具頁(yè)面 下載對(duì)應(yīng)系統(tǒng)版本的微信開(kāi)發(fā)者工具 注意：脫離微信開(kāi)發(fā)者工具是不能調(diào)試的 好...
閱讀 1190·2021-11-23 10:05
閱讀 1839·2021-11-12 10:36
閱讀 1886·2019-08-30 15:56
閱讀 1714·2019-08-29 12:32
閱讀 3072·2019-08-28 18:04
閱讀 3457·2019-08-26 12:17
閱讀 2530·2019-08-26 11:35
閱讀 1280·2019-08-23 15:11
