折腾：
【记录】小程序优化绘本查询细节的功能和逻辑
期间，需要去实现模拟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>效果：
转载请注明：在路上 » 【已解决】小程序中实现列表中第一个元素特殊显示