微信小程序之 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 相关文章推荐
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
Nuxt.js实战详解
Jan 18 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
vue特效之翻牌动画
Apr 20 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
yii数据库的查询方法
2015/12/28 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
python获取url的返回信息方法
2018/12/17 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
python自动生成model文件过程详解
2019/11/02 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
python用什么编辑器进行项目开发
2020/06/17 Python
python如何建立全零数组
2020/07/19 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
一岗双责责任书
2014/04/15 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
军训个人总结
2015/03/03 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
centos8安装MongoDB的详细过程
2021/10/24 MongoDB