小程序实现多个选项卡切换


Posted in Javascript onJune 19, 2020

选项卡的功能用途有很多地方:例如商品评论的切换,还有文章分类,还有各种各样的切换功能需要用到。这个实现是通过for循环,取数值下标的方式来实现切换

小程序实现多个选项卡切换

test.wxml

<view class='content'>
<view class='tab {{idx == index? "type-item-on" : ""}}' data-index='{{index}}' catchtap='tab' wx:for='{{tab}}' wx:key='key'>{{item.title}}</view>
</view>
<view wx:if='{{idx == 0}}' class='tab1' data-id='0' bindtouchmove="handletouchmove">1111</view>
<view wx:if='{{idx == 1}}' class='tab2' data-id='1' bindtouchmove="handletouchmove">222</view>
<view wx:if='{{idx == 2}}' class='tab3' data-id='2' bindtouchmove="handletouchmove">333</view>

test.wxss

page {
width: 100%;
height: 100%;
}
 
.content {
width: 100%;
display: flex;
justify-content: space-around;
}
 
.tab {
width: 30%;
height: 80rpx;
text-align: center;
line-height: 80rpx;
background: #f0f0f0;
padding: 5rpx;
}
 
.type-item-on {
border-bottom: 4rpx solid #e64340;
color: red;
}
 
.tab1 {
width: 100%;
height: 100%;
background: orange;
}

test.js

//logs.js
Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 tab: [{
  title: '111',
  id: 0
 },
 {
  title: '222',
  id: 1
 },
 {
  title: '333',
  id: 3
 },
 
 ],
 idx: 0, //默认选中第一项
 
 
 },
 
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 
 },
 // tab
 tab(e) {
 let that = this;
 let index = e.currentTarget.dataset.index;
 that.setData({
  idx: index,
 })
 
 }
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的Function详细
Nov 14 Javascript
js 图片轮播(5张图片)
Dec 30 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
AJAX检测用户名是否存在的方法
Mar 24 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 #Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 #Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 #Javascript
深入解读VUE中的异步渲染的实现
Jun 19 #Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 #Javascript
微信小程序收藏功能的实现代码
Jun 19 #Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 #Javascript
You might like
drupal 代码实现URL重写
2011/05/04 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
php导入导出excel实例
2013/10/25 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
js的2种继承方式详解
2014/03/04 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
原生js仿浏览器滚动条效果
2017/03/02 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
如何使用python爬取csdn博客访问量
2016/02/14 Python
python绘制直线的方法
2018/06/30 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
pandas数据处理进阶详解
2019/10/11 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
自荐信如何制作?
2014/02/21 职场文书
小学评语大全
2014/04/22 职场文书
出国留学计划书
2014/04/27 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
实习生辞职信范文
2015/03/02 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
MySQL数据库 安全管理
2022/05/06 MySQL