小程序如何写tab选项卡

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>

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 () {}
})

css

.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选项卡相关推荐

微信小程序设置底部tab选项卡
微信小程序选项卡用到tabbar组件. 在app.json中添加tabbar组件即可.(输入会自动补全) list存放的就是tab选项卡了.一个对象就是一个选项卡,官方规定为2到5个.text是文本提 ...
微信小程序点击tab栏切换，点击切换某个tab滚动到中间（ uniapp ）
微信小程序点击tab栏切换,点击某个tab滚动到中间( uniapp ) 之前写过原生js的tab栏滚动到中间,正好最近有个uniapp小程序项目中要用到tab切换滚动, 写个demo发出来 + 注意 ...
一个基于Bmob的OPPO锁屏壁纸小程序，写过之后发现...好像没什么卵用...一脸懵逼
小程序之前写的,也就前段时间,毛毛糙糙的写了第一版... 因为使用OPPO手机,所以有个锁屏杂志的东西,里面的图片每天都是由OPPO官方的人进行精选然后推送给用户的,图片菲菲菲菲菲常漂亮,看到网上很多 ...
微信小程序---手写签名（签字版）
公司近期有个需要用户签名的功能,就用小程序canvas写了个, wxml <view class="sign"><view class="paper&q ...
微信小程序仿写豆瓣评分我的页面
微信小程序仿写豆瓣评分我的页面搭建豆瓣评分我的页面,先在pages文件夹下创建pages,得到4个文件,在这4文件中来实现界面的搭建; 原文链接 1.头部header模块的搭建头部模块的搭建比较简 ...
一个基于Bmob的OPPO锁屏壁纸小程序，写过之后发现...好像没什么卵用...一脸懵逼...
小程序之前写的,也就前段时间,毛毛糙糙的写了第一版... 因为使用OPPO手机,所以有个锁屏杂志的东西,里面的图片每天都是由OPPO官方的人进行精选然后推送给用户的,图片菲菲菲菲菲常漂亮,看到网上很多 ...
微信小程序中的Tab切换
微信小程序中的Tab切换使用步骤使用步骤代码如下(示例): 定义一个状态status data: {status: 0,}, 代码如下(示例): 在点击切换时利用status来切换根据index ...
用jQuery事件写Tab选项卡
开发工具与关键技术: VS 2019/JS 作者:唐嘉怡撰写时间:2022/6/8 大家都用过Jscript事件来写过Tab选项卡,但是代码会很繁琐,但如果有更简洁的方法来写Tab选项卡事件就更好了 ...
微信小程序：各种Tab栏
时隔这么久,终于又开始写博客了:P.本文记录的是本人在做微信小程序的时候,自己实现的几种tab栏.排序从简单到复杂.我实现了以下几种: 最普通的Tab.点击变色并切换,无过渡. 带滑动效果的Tab,配 ...

小程序如何写tab选项卡

小程序如何写tab选项卡相关推荐

最新文章

热门文章