最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】小程序中实现列表中第一个元素特殊显示

列表 crifan 405浏览 0评论
折腾:
【记录】小程序优化绘本查询细节的功能和逻辑
期间,需要去实现模拟web页面中的:
即:
一个tag的list,第一个特殊显示
然后就去想办法
期间以为需要用:
条件渲染 · 小程序
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
结果发现:
此处没法去判断 特殊的highlightTag是否有值,然后去加上特殊的class去高亮
期间需要从list中删除掉一个元素:
【已解决】js中如何删除列表中元素
【总结】
最后考虑到:
当前显示的view可以for循环处理,放在当前根的view下面
所以可以把 高亮的 和 普通的拆分成两个列表,然后分别显示:
components/tags/tags.js
// components/tags/tags.js
const app = getApp() //获取应用实例
const util = require('../../utils/util.js')
const book_common = require('../../utils/book_common.js')

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    bookDifficulty:{
      // type: Number,
      // value: 0,
      type: String,
      value: "",
    },
    inputTagList: {
      type: Array,
      value: [],
      observer: function (newTagList, oldTagList, changedPath) {
        console.log("inputTagList observer: newTagList=%o, oldTagList=%o, changedPath=%o",
          newTagList, oldTagList, changedPath)
        
        console.log("this.properties.highlightTag=%s", this.properties.highlightTag)

        if(newTagList){
          var normalTagList = newTagList
          var highlightTagList = []

          if (this.properties.highlightTag) {
            normalTagList = util.removeListItem(newTagList, this.properties.highlightTag)
            highlightTagList = [this.properties.highlightTag]
          }
          console.log("normalTagList=%o, highlightTagList=%o", normalTagList, highlightTagList)

          this.setData({
            normalTagList: normalTagList,
            highlightTagList: highlightTagList,
          })
        }
      }
    },
    highlightTag: {
      type: String,
      value: "",
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    highlightTagList: [],
    normalTagList: [],
  },

  /**
   * 组件的方法列表
   */
  methods: {
...
  },

})
components/tags/tags.wxml
<!--components/book_list/book_list.wxml-->

<view class='tag_list'>
  <view
    wx:for="{{highlightTagList}}"
    wx:for-index="highlightTagIdx"
    wx:for-item="eachHighlightTag"
    wx:key="*this"

    class='single_tag_normal highlight_tag'
    bindtap='tagClickCallback'
    data-tag="{{eachHighlightTag}}"
    data-difficulty="{{bookDifficulty}}"
  >
    {{eachHighlightTag}}
  </view>

  <view
    wx:for="{{normalTagList}}"
    wx:for-index="normalTagIdx"
    wx:for-item="eachNormalTag"
    wx:key="*this"

    class='single_tag_normal'
    bindtap='tagClickCallback'
    data-tag="{{eachNormalTag}}"
    data-difficulty="{{bookDifficulty}}"
  >
    {{eachNormalTag}}
  </view>
</view>
效果:

转载请注明:在路上 » 【已解决】小程序中实现列表中第一个元素特殊显示

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
84 queries in 0.102 seconds, using 20.52MB memory