微信小程序开发—(三)选项卡

亦凉 2021-09-12 06:02 464阅读 0赞

在pages文件里面创建swipertab文件夹

1.编写页面结构:swipertab.wxml

<view class="swiper-tab">  
        <view class="swiper-tab-list {
       {currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">tab一</view>  
        <view class="swiper-tab-list {
       {currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">tab二</view>  
        <view class="swiper-tab-list {
       {currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">tab三</view>  
    </view>  
    <swiper current="{
       {currentTab}}" class="swiper-box" duration="300" style="height:{
       {winHeight - 31}}px" bindchange="bindChange">  
          
        <swiper-item>  
          <view>tab一</view>  
        </swiper-item>  
          
        <swiper-item>  
          <view>tab二</view>  
        </swiper-item>  
          
        <swiper-item>  
          <view>tab三</view>  
        </swiper-item>  
    </swiper>

2.设置数据:swipertab.js

//获取应用实例  
    var app = getApp()
    Page({
    	data: {
    		/** 
    		 * 页面配置
    		 */
    		winWidth: 0,
    		winHeight: 0,
    		// tab切换  
    		currentTab: 0,
    	},
    	onLoad: function() {
    		var that = this;
    
    		/** 
    		 * 获取系统信息
    		 */
    		wx.getSystemInfo({
    
    			success: function(res) {
    				that.setData({
    					winWidth: res.windowWidth,
    					winHeight: res.windowHeight
    				});
    			}
    
    		});
    	},
    	/** 
    	 * 滑动切换tab
    	 */
    	bindChange: function(e) {
    
    		var that = this;
    		that.setData({
    			currentTab: e.detail.current
    		});
    
    	},
    	/** 
    	 * 点击tab切换
    	 */
    	swichNav: function(e) {
    
    		var that = this;
    
    		if (this.data.currentTab === e.target.dataset.current) {
    			return false;
    		} else {
    			that.setData({
    				currentTab: e.target.dataset.current
    			})
    		}
    	}
    })

3.设置样式:swipertab.wxss

.swiper-tab{  
        width: 100%;  
        border-bottom: 2rpx solid #777777;  
        text-align: center;  
        line-height: 80rpx;}  
    .swiper-tab-list{  font-size: 30rpx;  
        display: inline-block;  
        width: 33.33%;  
        color: #777777;  
    }  
    .on{ color: #da7c0c;  
        border-bottom: 5rpx solid #da7c0c;}  
      
    .swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }  
    .swiper-box view{  
        text-align: center;  
    }

4.头部标题修改:swipertab.json

{
        "navigationBarTitleText": "选项卡页面切换"
    }

5.效果图

![20170427161411503][]

注意：因为文件名不是index,所以记得修改app.json文件(底下备注的地方)，否则页面不会显示同时底部不会显示

![20170427161659037][]

[20170427161411503]: /images/20210813/3d558559a585489e9079b42a515900f3.png
[20170427161659037]: /images/20210813/a7dbe31b5c8b42c49e26b7eccd86cbcd.png