微信小程序之 catalog 切换实现解析


Posted in Javascript onSeptember 12, 2019

组件名称:catalog

组件属性:catalogData,type:String

组件描述:这是一个子组件,数据从父组件中传递

效果图:

微信小程序之 catalog 切换实现解析

catalog 目录为多个,使用 scroll-view 容器。但是在当前组件中,只写每个 catalog 数据展示并实现 catalog 切换效果,这样会保证当前组件的最小粒度。

分析当前组件可能用到的属性为:组件名称,切换状态,未选中状态,切换点击方法。

<block wx:for="{{catalogData}}" wx:key="id" wx:for-item="item" class="item">
  <view class="scroll-view-item catalog-title {{curIndex == index ? 'catalog-active' : 'catalog-normal'}}" data-index="{{index}}" catchtap="goIndex">{{item.catalog}}</view>
</block>

curIndex 为点击当前 catalog 时获取的 index

index 为 catalogData 这个数组默认的 index, 也就是 data-index 的值

goIndex 为点击当前 catalog 的方法,通过点击获取到 curIndex 的值

通过判断当前 curIndex 是否与数组中的 index 是否相等,如果相等,则给当前 catalog 添加选中的样式 catalog-active,否则添加 catalog-normal。

更新默认 curIndex 的默认值

Component({
 /**
  * 组件的属性列表
  */
 properties: {
  catalogData:{
   type: Array,
  }
 },
 /**
  * 组件的初始数据
  */
 data: {
   curIndex:0
 },  
  /**
   * 组件的方法列表
   */
  methods: {
    goIndex(event) {
      let nextIndex = event.currentTarget.dataset.index;
      this.setData({
        curIndex: nextIndex
      })      
      console.log(this.data.curIndex + '=' + nextIndex);
    },
  }
})

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

Javascript 相关文章推荐
js最简单的拖拽效果实现代码
Sep 24 Javascript
js实现的折叠导航示例
Nov 29 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
图解javascript作用域链
May 27 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 #Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 #Javascript
使用flow来规范javascript的变量类型
Sep 12 #Javascript
LayUI数据接口返回实体封装的例子
Sep 12 #Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 #Javascript
layui框架与SSM前后台交互的方法
Sep 12 #Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 #Javascript
You might like
Zend studio文件注释模板设置方法
2013/09/29 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
jquery 学习之一 对象访问
2010/11/23 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
layui前端时间戳转化实例
2019/11/15 Javascript
跟老齐学Python之再深点,更懂list
2014/09/20 Python
python正则表达式re之compile函数解析
2017/10/25 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
python定时截屏实现
2020/11/02 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
农业资源与环境专业自荐信范文
2013/12/30 职场文书
毕业晚会主持词
2014/03/24 职场文书
导师就业推荐信范文
2014/05/22 职场文书
小学运动会班级口号
2014/06/09 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers