微信開發頂部選擇卡

韦小宝
發布: 2023-03-21 12:46:01
原創
1153 人瀏覽過

這篇文章講述了微信開發頂部選擇卡,大家對微信開發頂部選擇卡不了解的話或者對微信開發頂部選擇卡感興趣的話那麼我們就一起來看看本篇文章吧, 好了廢話少說進入正題吧!

微信小程式頂部選項卡在開發中是非常常用的,下面用一點時間實現了一下。

效果圖:


#下面直接上程式碼:

wxml:

#
<!--pages/index/index.wxml-->
<view class="swiper-tab">
    <view class="tab-item {{currentTab==0 ? &#39;on&#39; : &#39;&#39;}}" data-current="0" bindtap="swichNav">选项一</view>
    <view class="tab-item {{currentTab==1 ? &#39;on&#39; : &#39;&#39;}}" data-current="1" bindtap="swichNav">选项二</view>
    <view class="tab-item {{currentTab==2 ? &#39;on&#39; : &#39;&#39;}}" 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 () {

    }
})
登入後複製
###以上是實作過程,整體沒什麼難度。可以參考參考,大家如果還不太了解的話,可以自己多實現兩邊就很容易掌握了哦! ############相關推薦:######################PHP微信開發翻譯功能####################################################################################### ####PHP微信開發之獲取城市天氣######

以上是微信開發頂部選擇卡的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!