微信小程序-实现tab选项卡

原代码处：松宝写代码

修改了原代码滑动bug（第一个滑到第二，第二个滑不到第一个，直接到第三个）

微信小程序tab选项卡

一、效果

二、代码

wxml：

<view class='ticket-container'><scroll-view scroll-y bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-top="{{scrollTop}}" refresher-enabled="{{true}}" refresher-background="#ff00ff"><!--Tab布局--><view class='title'><view class="{{0 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='0'><text>未使用</text><hr class="line-style"/></view><view class="{{1 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='1'><text>已使用</text><hr class="line-style"/></view><view class="{{2 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='2'><text>已过期</text><hr class="line-style" /></view></view><!--内容布局--><swiper class='swiper' bindchange='pagechange' current='{{currentIndex}}'><swiper-item class='swiper'><view wx:for="{{firstList}}" wx:for-item="item" class='record-item'><view class='name'><span>名称：{{item.name}}</span><span>面额：{{item.money}}</span></view></view></swiper-item><swiper-item class='swiper' class='swiper'><view wx:for="{{secondList}}" wx:for-item="item" class='record-item'><view class='name'><span>名称：{{item.name}}</span><span>面额：{{item.money}}</span></view></view></swiper-item><swiper-item class='swiper' class='swiper'><view wx:for="{{thirdList}}" wx:for-item="item" class='record-item'><view class='name'><span>名称：{{item.name}}</span><span>面额：{{item.money}}</span></view></view></swiper-item></swiper></scroll-view>
</view>

// pages/tab/tab.js
Page({/*** 页面的初始数据*/data: {currentIndex: 0,"firstList": [{name: '未使用券1',money: '5.00'}, {name: '未使用券2',money: '50.00'}, {name: '未使用券2',money: '50.00'}, {name: '未使用券2',money: '50.00'}, {name: '未使用券2',money: '50.00'}, {name: '未使用券2',money: '50.00'}, {name: '未使用券2',money: '50.00'}, {name: '未使用券2',money: '50.00'}, {name: '未使用券2',money: '50.00'}, {name: '未使用券2',money: '50.00'}, {name: '未使用券2',money: '50.00'}, {name: '未使用券2',money: '50.00'}, {name: '未使用券2',money: '50.00'}, {name: '未使用券2',money: '50.00'}],"secondList": [{name: 'y券1',money: '10.00'}, {name: 'y券2',money: '20.00'}],"thirdList": [{name: 'g券1',money: '30.00'}, {name: 'g券2',money: '40.00'}],},//swiper切换时会调用pagechange: function (e) {console.log(e);if ("touch" === e.detail.source) {let currentPageIndex = this.data.currentIndex;if (currentPageIndex < e.detail.current) {currentPageIndex = (currentPageIndex + 1) % 3} else {currentPageIndex = (currentPageIndex - 1) % 3}this.setData({currentIndex: currentPageIndex})}},//用户点击tab时调用titleClick: function (e) {let currentPageIndex =this.setData({//拿到当前索引并动态改变currentIndex: e.currentTarget.dataset.idx})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

wxss

/* pages/tab/tab.wxss */
.ticket-container {height: 100%;min-height: 100%;height: 100vh;display: flex;flex-direction: column;box-sizing: border-box;
}.title {width: 100%;height: 88rpx;background: white;display: flex;align-items: center;justify-content: space-around;
}.title-sel {color: #24272c;font-size: 32rpx;display: flex;flex-direction: column;align-items: center;
}.title-sel  .line-style{background: #fff;height: 6rpx;width: 40rpx;position: relative;margin-top: 10rpx;
}.title-sel-selected{color: #006bff;font-size: 32rpx;display: flex;flex-direction: column;align-items: center;
}
.title-sel-selected .line-style{background: #006bff;height: 6rpx;width: 90rpx;position: relative;margin-top: 10rpx;
}.swiper {width: 90%;height: calc(100vh - 88rpx);flex: 1;overflow: scroll;margin: 0 auto;
}.record-item {margin-top: 10rpx;background-color: white;padding-bottom: 5rpx;padding-top: 5rpx;font-size: 30rpx;
}.name{display: flex;justify-content: space-between;border: 1px solid #eee;padding: 2vh;border-radius: 10rpx
}

微信小程序-实现tab选项卡相关推荐

微信小程序---实现tab选项卡
1.可以使用插件li-ui,根据个人情况修改详情信息. 标签页 Tabs | Lin UI (talelin.com) <l-tabs bind:linchange="changeTa ...
微信小程序-06 tab选项卡滑动切换与列表Item（scroll 、 swiper）数据的获取等所用到的都有了
目录示例图片 WXML js WXSS 示例图片 WXML <view ><scroll-view scroll-x="true" class="ta ...
微信小程序实现Tab选项卡（极简单版）
一言不合上来就是wxml的代码喔好啦,如果没有基础的同学,建议撸一遍文档,或者去看书把简单的知识串起来.这里我要说的是block这个标签,block这个标签并不是一个组件,它只是一个包装元素,不会在 ...
微信小程序的tab选项卡的实现
效果图,既可以点击切换,又可以滑动切换这里写图片描述 .wxml  <view class="swiper- ...
微信小程序滚动Tab选项卡：左右滑动切换、触底加载分页
文章目录效果图一.顶部标签栏二.列表内容部分 swiper组件高度及上下滚动样式三.数据结构及赋值方法四.scroll组件触底事件(分页相关五.scroll组件的高度样式 swiper组件 ...
钉钉小程序实现Tab选项卡
引言:小程序开发中,有很多封装好的控件,但是常用的tab选项卡没有,所以网上查了资料,可以根据view+swiper来实现,于是自己跟着也写了一个,由于自己刚接触钉钉小程序,网上资料还是蛮少的,所以这 ...
微信小程序开发之选项卡(窗口顶部TabBar)页面切换
微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml [html] vie ...
微信小程序开发之选项卡
选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是 ...
NO--15 微信小程序，scroll-view选项卡和跳转
大多数的商城类小程序都有这个功能,点击"全部订单","待付款","待发货","待收货","已完成", ...
微信小程序实现tab选中（特殊圆角）样式
1.实现效果 2.实现原理前3个常规设置即可,这里说下第四个样式可以看到,这边有个超出的圆角样式. 两种思路: 将整个父元素设置线性渐变色背景,上下两部分. 设置单个元素的伪元素,伪元素部分设置径 ...

微信小程序-实现tab选项卡

一、效果

二、代码

微信小程序-实现tab选项卡相关推荐

最新文章

热门文章