這篇文章講述了微信開發頂部選擇卡,大家對微信開發頂部選擇卡不了解的話或者對微信開發頂部選擇卡感興趣的話那麼我們就一起來看看本篇文章吧, 好了廢話少說進入正題吧!
微信小程式頂部選項卡在開發中是非常常用的,下面用一點時間實現了一下。
效果圖:
#下面直接上程式碼:
wxml:
#
<!--pages/index/index.wxml--> <view class="swiper-tab"> <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">选项一</view> <view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">选项二</view> <view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">选项三</view> </view> <swiper current="{{currentTab}}" class="swiper" duration="300" style="height:{{winHeight - 30}}px" bindchange="bindChange"> <swiper-item> <view>页面一</view> </swiper-item> <swiper-item> <view>页面二</view> </swiper-item> <swiper-item> <view>页面三</view> </swiper-item> </swiper>
wxss:
####### ###
/* pages/index/index.wxss */ .swiper-tab{ width: 100%; text-align: center; line-height: 80rpx; border-bottom: 1px solid #000; display: flex; flex-direction: row; justify-content: center; } .tab-item{ flex: 1; font-size: 30rpx; display: inline-block; color: #777777; } .on{ color: red; border-bottom: 5rpx solid red; } .swiper{ display: block; height: 100%; width: 100%; overflow: hidden; } .swiper view{ text-align: center; padding-top: 100rpx; }
// pages/index/index.js Page({ /** * 页面的初始数据 */ data: { winWidth:0, winHeight:0, currentTab:0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; /** * 获取系统信息 */ wx.getSystemInfo({ success: function (res) { that.setData({ winWidth: res.windowWidth, winHeight: res.windowHeight }); } }); }, bindChange: function (e) { var that = this; that.setData({ currentTab: e.detail.current }); }, swichNav: function (e) { var that = this; if (this.data.currentTab === e.target.dataset.current) { return false; } else { that.setData({ currentTab: e.target.dataset.current }) } } , /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
以上是微信開發頂部選擇卡的詳細內容。更多資訊請關注PHP中文網其他相關文章!