微信小程序之顶部选项卡(swiper)

微信小程序顶部选项卡在开发中是非常常用的,下面用一点时间实现了一下。

效果图:



下面直接上代码:

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; 
}  

js:

// 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 () {

    }
})

以上是实现过程,总体上没什么难度。可以参考参考

相关推荐

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

jmin_coming

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值