微信小程序之 catalog 切换实现解析

更新时间：2019年09月12日 10:47:39 作者：礼拜16

这篇文章主要介绍了微信小程序之 catalog 切换实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

组件名称：catalog

组件属性：catalogData，type：String

组件描述：这是一个子组件，数据从父组件中传递

效果图：

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无阻塞加载和defer、async详解
JS具有阻塞特性，当浏览器在执行js代码时，不能同时做其它事情，所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。
2017-02-02
关于递归运算的顺序测试代码
关于递归运算的顺序测试代码，需要的朋友可以参考下。
2011-11-11
微信小程序使用uni-app实现首页搜索框导航栏功能详解
这篇文章主要介绍了微信小程序使用uni-app实现首页搜索框导航栏功能，uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序
2022-10-10
JS处理下划线的方法步骤
本文主要介绍了使用JavaScript处理下划线,特别是在双引号内的下划线不作为分隔符的情况,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-01-01
three.js绘制地球、飞机与轨迹的效果示例
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。下面这篇文章主要给大家介绍了利用three.js如何绘制地球、飞机与轨迹的效果，文中给出了详细的示例代码，需要的朋友们可以参考借鉴，下面来一起看看吧。
2017-02-02
chrome浏览器如何断点调试异步加载的JS
chrome浏览器不仅仅可以用来上网，对于开发人员来说，它更像是一款强大的开发辅助工具。今天这篇文章给大家分享在chrome浏览器如何断点调试异步加载的JS，有需要的可以参考借鉴。
2016-09-09
在线一元二次方程计算器实例(方程计算器在线计算)
在线一元二次方程式计算器实例分享，大家参考使用吧
2013-12-12
javascript模拟select,jselect的方法实现
由于主流浏览器对select元素渲染不同，所以在每种浏览器下显示也不一样，最主要的是默认情况下UI太粗糙，即使通过css加以美化也不能达到很美观的效果
2012-11-11
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
marquee无缝滚动想必大家都有见过，本文利用div+css+javascript也实现下类似的滚动且兼容firefox，喜欢的朋友可以参考下
2013-08-08
javaScript实现浮点数转十六进制字符
浮点数转十六进制的方法有很多，在本文将为大家详细介绍下js中时如何实现的，下面有个不错的示例，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-10-10

微信小程序之 catalog 切换实现解析

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具