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


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 相关文章推荐
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
基于JS实现html中placeholder属性提示文字效果示例
Apr 19 Javascript
vue实现购物车选择功能
Jan 10 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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
扩展你的 PHP 之入门篇
2006/12/04 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
Python实现单词拼写检查
2015/04/25 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
公务员诚信承诺书
2014/05/26 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
成绩单家长意见
2015/06/03 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android