微信小程式中選項卡的應用程式隨處可見,本篇文章就來為大家介紹微信小程式中選項卡的實作。
之前寫過基於swiper的選項卡,在小程式中有swiper元件,毫無疑問這裡要用到swiper元件
小程式中的swiper元件有個問題就是無法根據內容自適應高度,所以要透過wx.getSystemInfoSync取得裝置高度設定swiper高度
#小程式中的swiper元件中swiper-item內容超出視覺區後無法捲動顯示,所以這裡要用到另一個元件scroll-view。
小程式中的swiper元件功能還是比較有限的,有待優化。
data: { tabs: ['菜单一', '菜单二'],// 导航菜单栏 curIdx:0,// 当前导航索引 scrollHeight:0, //滚动高度 = 设备可视区高度 - 导航栏高度 list:[],// 内容区列表 },
在onLoad函數中填入資料
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { let list=[]; for (let i=1;i<=30;i++){ list.push(i) } this.setData({ list: list }); },
<!-- 导航栏开始 --> <view class="swiper-tab"> <view wx:for="{{tabs}}" wx:key class="swiper-tab-item {{curIdx==index?'swiper-active':''}}" data-current="{{index}}" catchtap="clickTab"> <text>{{item}}</text> </view> </view>
/*初始化样式*/ view, text, picker, input, button, image{ display: flex; box-sizing: border-box; } /* 导航样式*/ .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; }
內容顯示區使用swiper元件,swiper-item個數要與tabs數組長度一致
<!-- 内容开始 --> <swiper class="swiper_content" current="{{curIdx}}" bindchange="swiperTab" style='height:{{scrollHeight}}px'> <swiper-item> <scroll-view class="scroll-y" scroll-y style='height:{{scrollHeight}}px' bindscrolltolower="onReachBottom"> <view wx:for="{{list}}" wx:key> <text> 内容一{{item}}</text> </view> </scroll-view> </swiper-item> <swiper-item> 内容二 </swiper-item> </swiper>
小程式中的swiper元件有個問題就是無法根據內容自適應高度,所以要透過[wx.getSystemInfoSync][4]取得裝置高度設定swiper高度
小程式中的swiper元件中swiper-item內容超出視覺區後無法捲動顯示,所以這裡要用到另一個元件[scroll-view][5]。
我們在onShow函數中透過getSystemInfoSync取得裝置的寬高來設定swiper元件高度以及scroll-view高度
onShow: function () { // 100为导航栏swiper-tab 的高度 this.setData({ scrollHeight: wx.getSystemInfoSync().windowHeight - (wx.getSystemInfoSync().windowWidth / 750 * 100), }) },
//点击切换 clickTab: function (e) { this.setData({ curIdx: e.currentTarget.dataset.current }) },
//滑动切换 swiperTab: function (e) { this.setData({ curIdx: e.detail.current }); },
/** * 页面上拉触底事件的处理函数 */ 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 }); },
一個漂亮的選項卡就完成了。 完整案例
以上就是本篇文章的全部內容了,更多精彩請關注php中文網。
以上是微信小程式中選項卡的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!