背景
在小程序中实现tab选项切换是一个十分常见的成果,对于固定几个tab切换或者轻而易举,但若呈现多个,对于有些老手,却不晓得怎么管制
您将浏览完本文后,将获取到
两种形式实现tab切换成果,凡是当前遇到相似的需要,都能够实现(本文重点)
实例成果
具体实现代码
微信 wxml 代码
<view> <view class="tab-container"> <view class="default {{type=='expend'? 'expend-active':''}}" bindtap="handleType" data-type="expend" >收入</view > <view class="default {{type=='earning'? 'earning-active': ''}}" bindtap="handleType" data-type="earning" >支出</view > <view class="default {{type=='transaccount'?'transaccount-active': ''}}" bindtap="handleType" data-type="transaccount" >转账</view > </view></view>微信wxss代码
/* pages/tablistchange/tablistchange.wxss */.tab-container { display: flex; justify-content: center; align-items: center; padding: 10rpx 0;}.tab-container .default { margin-right: 25rpx; padding: 5rpx 15rpx;}.expend-active { color: #0ca168; border-bottom: 2px solid #0ca168;}.earning-active { color: #ff6b6a; border-bottom: 2px solid #ff6b6a;}.transaccount-active { color: #abcdef; border-bottom: 2px solid #abcdef;}切换逻辑js代码
Page({ /** * 页面的初始数据 */ data: { type: 'expend', }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) {}, handleType(event) { const type = event.currentTarget.dataset.type; this.setData({ type: type, }); },});实例成果如下所示:
剖析
实现tab切换,次要是给切换元素绑定事件(bindtap)函数,而后在切换元素上设置data-xxx=''属性,绑定的事件对象会携带额定的信息,例如:dataset等,能够在事件对象中拿到在切换元素上设置不同的data属性值,在切换过程中,从新设置setData的值
在实现切换时,次要是切换class,在wxml中,依据type动静值,插值表达式,最终决定加载哪个激活状态的款式
这种固定的tab切换成果显然是能够实现的,但问题来了,如果是多个呢,不固定的呢?
实现不固定动静的 tab 切换
如下示例成果
如下是wxml
<view class="encourage-content"> <view class="encorage-title">{{accountlist.encourtitle}}</view> <view class="encourage-list"> <block wx:for="{{listData}}" wx:key="*this"> <view data-item="{{item}}" class="list-item {{item.account == accountlist.account ? 'list-active': ''}}" bindtap="handleList" >￥<text>{{item.account}}</text></view > </block> </view></view>如下是示例 wxss 代码
.encourage-content { text-align: center; padding: 30rpx 80rpx 0 80rpx;}.encourage-content .encorage-title { padding-bottom: 30rpx; color: #ff6b6a;}.encourage-content .encourage-list { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}.encourage-content .encourage-list .list-item { width: 31%; height: 80rpx; border: 1px solid #dddd; margin-bottom: 15rpx; line-height: 80rpx;}.encourage-content .encourage-list .list-active { color: #ff6b6a; border: 1px solid #ff6b6a;}如下是逻辑 js 代码
// pages/tablistchange/tablistchange.jsPage({ /** * 页面的初始数据 */ data: { accountlist: { // 通过初始化一个指标对象 account: 2, encourtitle: '两只黄鹂鸣翠柳', }, listData: [ // 循环遍历的list数据 { account: 2, encourtitle: '两只黄鹂鸣翠柳', }, { account: 3, encourtitle: '三人行,必有我师', }, { account: 5, encourtitle: '吾生有涯,吾知无涯', }, { account: 13, encourtitle: '一行白鹭上青天', }, { account: 14, encourtitle: '白驹过隙,岁月如梭,愿君只争朝夕', }, { account: 52, encourtitle: '何以解忧,唯有暴富', }, ], }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) {}, // 列表切换 handleList(event) { // console.log(event); this.setData({ // 给accountList对象从新赋值 accountlist: event.currentTarget.dataset.item, }); },});剖析
实现多个tab切换,在这里借助了一个两头变量对象accountList,首先循环遍历以后的数据listData,而后在切换元素上绑定事件,同时设置data属性值,通过事件对象携带的参数信息,从新赋值给accountlist对象
在wxml中通过源对象数据(listData)与新赋值对象数据(accountlist)中的某个属性值做比拟,判断是否相等,来加载指定的款式
这种实现形式有别于下面固定的切换,如果有应用过一些vue,react框架的话,实现相似的切换成果也是有殊途同归之妙
至于实现案例当中的领取,波及到云领取,实现起来也来也不简单,加一个表单输入框,绑定数据,联合云领取就能够实现下单功能
具体实现云领取性能可参考小程序-云开发-实现微信云领取性能
最初
实现相似这种tab切换,有时候,可能两三个tab切换晓得怎么实现,然而一旦遇到多个,而且时动静时,会发现之前的形式却不耐用了的
这个时候往往须要借助一个第三方的两头变量,而后与源对象中的某个属性值进行比拟的,这个源对象的属性值能够用原有的,也能够新增的(比方id)之类的,总之有一个与之比拟,就能够的
原文出处-小程序-实现 tab-及多个列表选项切换-https://coder.itclan.cn/