微信小程序:選項卡頁面切換
阿新 • • 發佈:2018-08-12
程序 tex oat info === 分享 ndt item dataset
一、功能描述
在同一個頁面內實現不同展示頁面的切換功能,如下圖所示
二、代碼實現
1. index.js
Page({ /** * 頁面的初始數據 */ data: { currentData : 0, }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { }, //獲取當前滑塊的index bindchange:function(e){ const that = this; that.setData({ currentData: e.detail.current }) }, //點擊切換,滑塊index賦值 checkCurrent:function(e){ const that = this; if (that.data.currentData === e.target.dataset.current){ return false; }else{ that.setData({ currentData: e.target.dataset.current }) } } })
2. index.wxml
<view class=‘topTabSwiper‘> <view class=‘tab {{currentData == 0 ? "tabBorer" : ""}}‘ data-current = "0" bindtap=‘checkCurrent‘>推薦</view> <view class=‘tab {{currentData == 1 ? "tabBorer" : ""}}‘ data-current = "1" bindtap=‘checkCurrent‘>熱點</view> <view class=‘tab {{currentData == 2 ? "tabBorer" : ""}}‘ data-current = "2" bindtap=‘checkCurrent‘>關註</view> </view> <swiper current="{{currentData}}" class=‘swiper‘ style="height:600px;" duration="300" bindchange="bindchange"> <swiper-item><view class=‘swiper_con‘>welcome come to 推薦</view></swiper-item> <swiper-item><view class=‘swiper_con‘>welcome come to 熱點</view></swiper-item> <swiper-item><view class=‘swiper_con‘>welcome come to 關註</view></swiper-item> </swiper>
3. index.wxss
.tab { float: left; width: 33.3333%; text-align: center; padding: 10rpx 0; } .topTabSwiper { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; zoom: 1; } .topTabSwiper:after { content: ""; clear: both; display: block; } .tabBorer { border-bottom: 1px solid #f00; color: #f00; } .swiper { width: 100%; } .swiper_con { text-align: center; width: 100%; height: 100%; padding: 80rpx 0; }
微信小程序:選項卡頁面切換