微信小程序之 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 Undefined,Null类型和NaN值区别
Oct 22 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
JavaScript实现星级评价效果
May 17 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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
MySQL数据源表结构图示
2008/06/05 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
JS中递归函数
2016/06/17 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
python的id()函数解密过程
2012/12/25 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
python中添加模块导入路径的方法
2021/02/03 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
电台实习生求职信
2014/02/25 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
法制教育观后感
2015/06/17 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
js 实现验证码输入框示例详解
2022/09/23 Javascript