微信小程序之 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 Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
JavaScript实现下拉列表
Jan 20 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
php读取xml实例代码
2010/01/28 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
python根据文件大小打log日志
2014/10/09 Python
python开发简易版在线音乐播放器
2017/03/03 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
python实现同一局域网下传输图片
2020/03/20 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
百度JavaScript笔试题
2015/01/15 面试题
会计电算化应届生求职信
2013/11/03 职场文书
中专毕业生的自我鉴定
2013/12/01 职场文书
自立自强的名人事例
2014/02/10 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
教师党员整改措施
2014/10/24 职场文书
外出考察学习心得体会
2016/01/18 职场文书
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers