微信小程序中实现catalog切换
这篇文章给大家介绍微信小程序中实现catalog 切换，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
创新互联专注于成都网站设计、成都网站建设、网页设计、网站制作、网站开发。公司秉持“客户至上,用心服务”的宗旨,从客户的利益和观点出发,让客户在网络营销中找到自己的驻足之地。尊重和关怀每一位客户，用严谨的态度对待客户，用专业的服务创造价值，成为客户值得信赖的朋友，为客户解除后顾之忧。
catalog 目录为多个，使用 scroll-view 容器。但是在当前组件中，只写每个 catalog 数据展示并实现 catalog 切换效果，这样会保证当前组件的最小粒度。
分析当前组件可能用到的属性为：组件名称，切换状态，未选中状态，切换点击方法。
{{item.catalog}}
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);
},
}
})关于微信小程序中实现catalog 切换就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
网页题目：微信小程序中实现catalog切换
URL链接：
http://kswjz.com/article/phdecc.html
扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
