PHP前端开发

微信小程序选项卡功能的开发

百变鹏仔 5天前 #前端问答
文章标签 选项卡

本文主要和大家分享微信小程序选项卡功能的开发,希望能帮助到大家

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

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

<!--swipertab.wxml--><view>      <view>tab一</view>      <view>tab二</view>      <view>tab三</view>  </view>  <swiper>      <!-- 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文件(底下备注的地方),否则页面不会显示同时底部不会显示