小程序wx:for渲染繁多数据后,点击任意dom,更改dom?

Gogh
  • 35
  1. 问题: for循环生成列表 view节点(生成环境可能会成百上千条), 单次点击任意dom,更改点中的dom.
  2. 代码:
    <! -- page.wxml部分 -->

      <view class='imgItem' wx:for="{{imgData}}">
        <image src="{{item.img}}"></image>
        <view style="border-bottom-color:{{item.valColor}}"></view>
         
        <view><!-- $ 后台输出-->{{item.val}} </view> 
        <view class='tap' data-ind="{{index}}" bindtap='selectItem'></view>
      </view>

    <! -- page.js部分 -->

    data: {
        imgDate: [
            {
                "img": "http://img.png",
                "val": "12",
                "valColor": "#8847ff"
            },
            {
                ......
            }
                ..
                ..
                ..
                ..
        ]
    }
  3. 思路: 前期同样是在 data里面定义变量(中间量), 在行内用三目运算做判定, 根据结果 动态增/删class类名或者 wx:if/ hidden, 显然缺点/不可行是在要定义同样多条的变量来保存状态。
  4. 思路: 后来尝试过,定义动态变量, 根据wx:for循环中的 index, 赋值给每个节点 data-ind, 自定义属性来传递, 但是在 page.wxml文件中, dom节点上 {{动态变量cc+ind}}, 解析之后是 cc0, cc1, cc2... 类型为字符串..不会再次以变量cc0 , cc1解析...
回复
阅读 2.3k
2 个回答

额,问题描述的很乱啊。但是微信里面点击操纵dom节点就是改变数据啊不是吗。看你代码中应该是需要在selectItem中获取index,然后修改data[index]里面的值来达到操作dom的目的吧

  <view class='imgItem' wx:for="{{imgData}}"  data-ind="{{index}}"  bindtap='selectItem'>
    <image src="{{item.img}}"></image>
    <view style="border-bottom-color:{{item.valColor}}"></view>
     
    <view><!-- $ 后台输出-->{{item.val}} </view> 
    <view class='tap'  hidden="{{!selectItemArray[index]}}"></view>
  </view>
  
  ----------------
  data : {
      ...
      selectItemArray : [],
  },
  
    // 选择饰品

selectItem : function(e){

var ind = e.currentTarget.dataset.ind;
var arr = this.data.selectItemArray;
arr[ind] = !arr[ind];
this.setData({
  selectItemArray : arr
})    

},

用数组, 直接赋值数组中下标对应的dom节点 用 true/ false标记,

你知道吗?

宣传栏