微信小程序之 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 相关文章推荐
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 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
PHP5 安装方法
2007/01/15 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
js数据类型检测总结
2018/08/05 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
在Python的Django框架中加载模版的方法
2015/07/16 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
Django中URL的参数传递的实现
2019/08/04 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
如何开发一个JQuery插件
2016/07/28 面试题
小学教师自我鉴定
2013/11/07 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
公务员培的训心得体会
2014/09/01 职场文书
2014年班务工作总结
2014/12/02 职场文书
服务明星事迹材料
2014/12/29 职场文书
实习计划书范文
2015/01/16 职场文书
机动车交通事故协议书
2015/01/29 职场文书
琅琊山导游词
2015/02/05 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书