小程序如何写一个优美的tab选项卡

小程序如何写一个优美的tab选项卡？

最近有位朋友刚学小程序，于是乎给我传了他写的一个tab选项卡，昨天晚上恰有空闲，于是改了一下
写选项卡的方法有很多，方法也特别简单，本文就介绍一下就客户体验而言如何让写一个用户体验不错的选项卡
效果如下gif所示

wxml结构一共分为两个部分一个是tab头部和swiper构成的内容部分，用swiper做切换内容的盒子的好处是它能让用户的体验变得更好，出现如上所示的效果，当我点击tab头部是，下面的内容也会相应的切换，当滑动下方swiper的时候上方的tab头部相应的也会被点亮
wxml如下：

<view class="content"><!--头部tab切换部分start--><view class="menu"><view class="{{currentTab==index?'select':'default'}}" wx:for="{{switchtab}}" wx:key='' data-current="{{index}}" catchtap="switchNav">{{item.name}}</view></view><view class="explain-box"><text class="explain">使用说明</text><text class="iconfont icon-wenhao"></text></view><!--头部tab切换部分end--><!--切换内容部分start--><swiper current='{{currentTab}}' bindchange="tabChange" class='mySwiper'><block wx:for="{{coupons}}" wx:key=""><swiper-item><block wx:for="{{item}}" wx:key="" wx:for-item="spItem"><view class="item"><view class="left"><view class="left-top"><text class="rmb">¥</text><text class="price">{{spItem.price}}</text></view><view class="left-bottom"><text class="label">{{spItem.condition}}</text></view></view><view class="right"><text class="item-1">{{spItem.goods}}</text><text class="item-2">优惠券描述</text><text class="item-3">{{spItem.way}}</text><text class="item-4">{{spItem.date}}</text></view></view></block></swiper-item></block></swiper><!--切换内容部分end-->
</view>

在swiper组件中一共用过两个属性，一个是current，另一个是bindchange
阅读过官方文档的朋友都知道current是指当前所在滑块的 index，bindchange是指current 改变时会触发 change 事件，event.detail = {current: current, source: source}
js文件如下：

Page({data: {switchtab: [{name: '未使用',_type: 'notUsed'}, {name: '已使用',_type: 'alreadyUsed'},{name: '已过期',_type: 'expired'}],currentTab: 0,coupons: []},onLoad: function (options) {this.setData({coupons: this.loadCoupons()});},//tab切换函数，让swiper当前滑块的current的index与tab头部index一一对应switchNav: function (e) {var index = e.target.dataset.current;if (this.data.currentTab == index) {return false;} else {this.setData({currentTab: index});}},//滑动swiper切换，让swiper当前滑块的current的index与tab头部index一一对应tabChange(e) {this.setData({currentTab: e.detail.current})},//自定义数据函数loadCoupons: function () {let switchtab = this.data.switchtab,coupons = [{id: "1",price: "200",condition: "无门槛",goods: "新用户 20元优惠券；",way: "限无人机、数码、潮玩",date: "2017.3.22-2017.12.22",_type: "notUsed"}, {id: "1",price: "200",condition: "无门槛",goods: "新用户 20元优惠券；",way: "限无人机、数码、潮玩",date: "2017.3.22-2017.12.22",_type: "notUsed",}, {id: "1",price: "200",condition: "无门槛",goods: "新用户 20元优惠券",way: "限无人机、数码、潮玩；",date: "2017.3.22-2017.12.22",_type: "notUsed",}, {id: "1",price: "200",condition: "无门槛",goods: "新用户 20元优惠券",way: "限无人机、数码、潮玩；",date: "2017.3.22-2017.12.22",_type: "notUsed"}, {id: "1",price: "200",condition: "无门槛",goods: "新用户 20元优惠券",way: "限无人机、数码、潮玩；",date: "2017.3.22-2017.12.22",_type: "notUsed"}, {id: "2",price: "200",condition: "无门槛",goods: "新用户 20元优惠券",way: "限无人机、数码、潮玩；",date: "2017.3.22-2017.12.22",_type: "alreadyUsed"}, {id: "2",price: "100",condition: "满500可用",goods: "仅可购买网络品类指定商品",way: "全平台",date: "2017.3.22-2017.12.22",_type: "alreadyUsed",}, {id: "2",price: "100",condition: "满500可用",goods: "仅可购买网络品类指定商品",way: "全平台",date: "2017.3.22-2017.12.22",_type: "alreadyUsed",}, {id: "3",price: "200",condition: "满200可用",goods: "仅可购买网络品类指定商品",way: "全平台",date: "2017.3.22-2017.12.22",_type: "expired"}];//这里是根据tab头部的数据来重建一个数组，使数组的内容与tab一一对应var result = new Array();for (var n = 0; n < switchtab.length; n++) {let minArr = []for (var i = 0; i < coupons.length; i++) {//根据类型来区分自定义的内容属于哪个tab下面的if (coupons[i]._type == switchtab[n]._type) {minArr.push(coupons[i]);}}result.push(minArr)}return result;},onReady: function () {},onShow: function () {},onHide: function () {},onUnload: function () {},onPullDownRefresh: function () {},onReachBottom: function () {}
})

wxss如下：

@import "../../lib/style/font.wxss";.content {background-color: #fff;
}.menu {width: 100%;display: flex;box-sizing: border-box;border-bottom: 1px solid #f2f2f2;z-index: 11;
}.menu view {margin: 0rpx auto;height: 88rpx;line-height: 88rpx;font-size: 28rpx;color: #434343;
}.menu .mr {border-right: 0rpx;
}.select {position: relative;
}.select:after {position: absolute;left: 7rpx;bottom: 0rpx;content: "";width: 70rpx;height: 8rpx;background-color: #3795ff;border-radius: 4px 4px 0 0;
}.body {width: 100%;box-sizing: border-box;
}.body .explain-box {display: flex;justify-content: flex-end;height: 80rpx;line-height: 80rpx;box-sizing: border-box;padding: 0rpx 30rpx;z-index: 12;
}.explain-box text {font-size: 24rpx;color: #3795ff;
}.explain-box .explain {margin-right: 8rpx;
}.explain-box .icon-wenhao {vertical-align: middle;line-height: 82rpx;
}.item {background-color: #3795ff;width: 690rpx;margin: 0 auto;margin-bottom: 20rpx;border-radius: 10rpx;display: flex;padding: 20rpx 0rpx;box-sizing: border-box;
}.item .left {width: 180rpx;height: 140rpx;border-right: 1px solid #7fbbff;
}.item .left .left-top {text-align: center;height: 94rpx;color: #fff;
}.item .left .left-top .rmb {font-size: 34rpx;
}.item .left .left-top .price {font-size: 60rpx;
}.left-bottom {height: 32rpx;display: flex;justify-content: center;
}.label {height: 32rpx;line-height: 32rpx;padding: 0rpx 18rpx;font-size: 24rpx;color: #3795ff;text-align: center;background-color: #fff;border-radius: 200rpx;
}.item .right {flex: 1;display: flex;flex-direction: column;padding-left: 56rpx;
}.item-1 {font-size: 32rpx;line-height: 32rpx;color: #fff;
}.item-2 {font-size: 24rpx;line-height: 32rpx;color: #1b67bd;
}.item-3, .item-4 {margin-top: 13rpx;font-size: 24rpx;line-height: 32rpx;color: #fff;
}.item-4 {margin-top: 0rpx;
}.mySwiper {position: fixed;width: 100%;height: 100%;top: 0;box-sizing: border-box;padding: 170rpx 0rpx 0rpx 0rpx;z-index: -1;
}.mySwiper swiper-item {overflow-y: scroll;
}

欢迎大家留言！

小程序如何写一个优美的tab选项卡相关推荐

uni-app微信小程序，写一个级联查询
//用picker这个标签,mode="multiSelector" <view class="common room-expense"><v ...
python写一个完整的小程序_写一个python小程序
在windows环境下进行操作 window+R 输入cmd 创建一个文件夹 mkdir pytxt 创建一个py文件 py.py 用notepad或者记事本等工具进行编辑或首先声明pytho ...
微信小程序如何写一个计算器
构思:1.画一个计算界面 2.找一个计算器实现库 3.调用实现库进行计算实现:1.画出计算器图标.界面页面代码实现 <!--pages/calculator/calculator.wxml ...
java窗口小程序atm_写一个ATM机小程序（JAVA），目前老师讲到了静态工厂
/** * 存款 * @param in * @return */ public int deposit(int in){ creditlimit+=in; System.out.println(&q ...
python3经典小程序代码_一个可以套路别人的python小程序实例代码
python可以开发什么?谁有python小程序的源代码,...桌面程序,web都可以,还有比如现在讲的多的人工智能,神经网络源码可以去找一些开源代码,搜索一下,蛮多的. 分享python小程序代码练 ...
一个基于Bmob的OPPO锁屏壁纸小程序，写过之后发现...好像没什么卵用...一脸懵逼
小程序之前写的,也就前段时间,毛毛糙糙的写了第一版... 因为使用OPPO手机,所以有个锁屏杂志的东西,里面的图片每天都是由OPPO官方的人进行精选然后推送给用户的,图片菲菲菲菲菲常漂亮,看到网上很多 ...
一个基于Bmob的OPPO锁屏壁纸小程序，写过之后发现...好像没什么卵用...一脸懵逼...
小程序之前写的,也就前段时间,毛毛糙糙的写了第一版... 因为使用OPPO手机,所以有个锁屏杂志的东西,里面的图片每天都是由OPPO官方的人进行精选然后推送给用户的,图片菲菲菲菲菲常漂亮,看到网上很多 ...
微信小程序尝鲜一个月现状分析
概述曾记得在微信小程序还没有上线的时候,大家都是翘首以待.希望在张小龙,在企鹅的带领下,走出差别于原生开发的还有一条移动开发的道路,我也是一直关注着.知道1月9号,微信小程序最终对外开放了,作为第一 ...
微信小程序手写签名_微信小程序实现手写签字
无纸化办公,这是老板对我的要求,然而有人现场执法文件全部电子化,只有签字部分让一个搞web的人有点儿头疼,不能为了这个找个人来开发app吧于是想到了小程序,对于一个新接触小程序的人来说还是有挑战性的, ...
微信小程序仿写豆瓣评分我的页面
微信小程序仿写豆瓣评分我的页面搭建豆瓣评分我的页面,先在pages文件夹下创建pages,得到4个文件,在这4文件中来实现界面的搭建; 原文链接 1.头部header模块的搭建头部模块的搭建比较简 ...

小程序如何写一个优美的tab选项卡

小程序如何写一个优美的tab选项卡？

小程序如何写一个优美的tab选项卡相关推荐

最新文章

热门文章