微信小程序之 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 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
JQuery index()方法使用代码
Jun 02 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 Javascript
vue实现图片按比例缩放问题操作
Aug 11 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的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
PHP开发需要注意的安全问题
2010/09/01 PHP
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
php读取csc文件并输出
2015/05/21 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
php获取远程文件内容的函数
2015/11/02 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
jQuery参数列表集合
2011/04/06 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
计算机专业大学生的自我评价
2013/11/14 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
厨师长岗位职责
2014/03/02 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
班主任先进事迹材料
2014/12/17 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
Web应用开发TypeScript使用详解
2022/05/25 Javascript