共计 3257 个字符，预计需要花费 9 分钟才能阅读完成。
背景
在小程序中实现 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.js
Page({
/**
* 页面的初始数据
*/
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/