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

来源：互联网发布：周生生网络旗舰店编辑：程序博客网时间：2024/05/29 08:29

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

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

<!--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">      <!-- tab一 -->      <swiper-item>        <view>tab一</view>      </swiper-item>      <!-- tab二 -->      <swiper-item>        <view>tab二</view>      </swiper-item>      <!-- tab三 -->      <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.效果图

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

0 0