微信小程序之 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 相关文章推荐
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
js中如何完美的解析数据
Mar 18 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
PHP7新增函数
2021/03/09 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
js下用gb2312编码解码实现方法
2009/12/31 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
javascript中Object使用详解
2015/01/26 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
Python中return语句用法实例分析
2015/08/04 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
采购经理岗位职责
2014/02/16 职场文书
海飞丝的广告词
2014/03/20 职场文书
2016年教师新年寄语
2015/08/18 职场文书
《观潮》教学反思
2016/02/17 职场文书
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫