微信小程序之 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 相关文章推荐
javascript 全角转换实现代码
Jul 17 Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
Vue使用lodop实现打印小结
Jul 06 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
php连接数据库代码应用分析
2011/05/29 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
Yii全局函数用法示例
2017/01/22 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
JS二分查找算法详解
2017/11/01 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
Python生成随机验证码的两种方法
2015/12/22 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
python实现的Iou与Giou代码
2020/01/18 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
python PIL模块的基本使用
2020/09/29 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
英语专业学生个人求职信
2014/01/28 职场文书
节能减耗标语
2014/06/21 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
2014年保洁工作总结
2014/11/24 职场文书
离职告别感言
2015/08/04 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
python b站视频下载的五种版本
2021/05/27 Python