狗万官网酒店 > 狗万官网下载 > 微信小程序之 catalog 改装实现解析_javascript艺术

微信小程序之 catalog 改装实现解析_javascript艺术

来源: 2019-09-16 09:51 我来投稿 参与评论
这篇文章主要介绍了微信小程序之 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);
    },
  }
})

上述就是本文的方方面面内容,瞩望对大家的上学有所帮助,也愿意大家多多支持脚本的师。

义务编辑:狗万官网酒店
 
 
0% (0)
 
 
0% (0)
机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
地名: 匿名?

  •