原生微信小程序实现tab切换效果demo
2023-02-18 16:30:16 时间
效果图
Wxml
<!-- tab框 -->
<view class="nav_title">
<view class="nav_tab">
<!-- 如果选中的下表等于当前的索引,就使用active class名,否则class名为common -->
<view wx:for="{{list}}"
wx:key="list"
class="{{selected==index?'active':'common'}}"
data-index='{{index}}'
bindtap="selected">
{{item}}
<!-- 如果选中的下表等于当前的索引,就添加下划线 -->
<view class="{{selected==index?'nav_underline':''}}"></view>
</view>
</view>
<!-- tab1 -->
<view wx:if="{{selected == 0}}">内容1</view>
<!-- tab2 -->
<view wx:if="{{selected == 1}}">内容2</view>
<!-- tab3 -->
<view wx:if="{{selected == 2}}">内容3</view>
</view>
/* 页面背景色 */
page {
background: rgba(247, 247, 247, 1);
}
.nav_tab {
width: 702rpx;
margin: 20rpx auto;
height: 100rpx;
display: flex;
background: #fff;
border-radius: 10rpx;
flex-direction: row;
}
/* 未选中的样式 */
.common {
line-height: 100rpx;
text-align: center;
flex: 1;
color: #333;
font-size: 28rpx;
opacity: 0.5;
}
/* 选中时的样式 */
.active {
line-height: 100rpx;
text-align: center;
color: #ef9ba8;
flex: 1;
font-size: 28rpx;
}
/* 下划线的样式 */
.nav_underline {
background: #ef9ba8;
width: 54rpx;
height: 6rpx;
margin-top: -10rpx;
margin-left: 70rpx;
border-radius: 8rpx;
}
Page({
/**
* 页面的初始数据
*/
data: {
selected: 0,
list: ['Tab1', 'Tab2', 'Tab3'],
},
//tab框
selected: function (e) {
let that = this
//console.log(e)
let index = e.currentTarget.dataset.index
//console.log("index",index)
if (index == 0) {
that.setData({
selected: 0
})
} else if (index == 1) {
that.setData({
selected: 1
})
} else {
that.setData({
selected: 2
})
}
}
相关文章
- Jenkins Android APP 持续集成体系建设二—自动部署、执行测试任务,关联打包任务
- Jenkins Android APP 持续集成体系建设一—源码编译、打包、输出APK包、邮件通知
- 性能调优之iostat命令详解
- 移动端自动化测试-Mac-IOS-Appium环境搭建
- 移动端自动化测试-Windows-Android-Appium环境搭建
- Android开发——adb连接夜神模拟器
- Android项目刮刮奖详解扩展篇——开源刮刮奖View的制作
- Android项目刮刮奖详解(四)
- Android项目刮刮奖详解(三)
- Android项目刮刮奖详解(二)
- Android项目刮刮奖详解(一)
- Android开发——Drawable与Bitmap知识
- Android开发——绘图基础
- Android破解学习之路(八)—— 进化之地内购破解
- Android破解学习之路(九)—— 练手破解游戏集合
- Android开发——使用自带图标
- 教我徒弟Android开发入门(四)
- Android安全–加强版Smali Log注入
- Android APK 签名文件MANIFEST.MF、CERT.SF、CERT.RSA分析
- Android安全–检测是否为Android模拟器