微信小程序如何获取item内容

产品块
img

订单块
img

这里的袋子,我点加一个产品就加一个当前点击的产品进去袋子里面,减一个产品也减去袋子里指定的一个产品,而且外部的这个圆数字也是实时更新

加减的时候统计下所有产品的购买数量setData更新下就行了,示例代码如下,弹出层最主要的就是加block wx:if="{{item.num}}" 这个判断,有数量时才显示在弹出层

img

demo.wxss


view.op{float:right}
view.op button,view.op text{float:left;text-align:center;}
view.op text{width:30px;}
view.op button{border-radius: 50%;width:20px;height:20px;line-height:20px;background:#000;color:#fff;padding:0}

.footmenu{position:fixed;bottom:0;left:0;width:100%;padding:30px 10px;background:#edc679;z-index:2}
.footmenu view{float:left;line-height:50px;font-size:20px;position:relative;margin-right:10px}
.footmenu view .num{position: absolute;width:30px;height:30px;border-radius: 50%;right:-15px;top:-15px;background:#666 ;text-align: center;line-height:30px;}
.footmenu view.submit{float:right;margin-right:25px}
.footmenu view.submit button{background:#666}

.mask{position: fixed;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:1;left:0;top:0}
.mask .choosed{background:#edc679;position:absolute;bottom:110px;left:0;width:100%}


demo.wxml


<view wx:for="{{goods}}" style="margin-bottom:20px" wx:key="title">
<view>{{item.For_title}}</view>
<view>{{item.For_content}}</view>
<view>{{item.For_money}}
<view class="op">
<button bindtap="setNum" data-title="{{item.For_uid}}" data-op="-" style="display: {{item.num?'block':'none'}};">-</button>
    <text style="display: {{item.num?'block':'none'}}">{{item.num}}</text>
<button bindtap="setNum" data-title="{{item.For_uid}}" data-op="+">+</button>
</view>
</view>
</view>

<view class="mask" style="display:{{showPop?'block':'none'}}">
<view class="choosed">
<view wx:for="{{goods}}" style="margin-bottom:10px" wx:key="title">
<block wx:if="{{item.num}}"> 
   <view>{{item.For_title}}</view>
  <view>{{item.For_money}}
   <view class="op">
     <button bindtap="setNum" data-title="{{item.For_uid}}" data-op="-" style="display: {{item.num?'block':'none'}};">-</button>
    <text style="display: {{item.num?'block':'none'}}">{{item.num}}</text>
    <button bindtap="setNum" data-title="{{item.For_uid}}" data-op="+">+</button>
    </view>
   </view>
  </block>
</view>
</view>
</view>

<view class="footmenu">
<view bindtap="showPop">
袋子
<view class="num">{{sum||0}}</view>
</view>
<view>联系掌柜</view>
<view class="submit"><button>提交订单</button></view>
</view>


demo.js


Page({
    data: {
        showPop:false,//默认隐藏
        goods: [
            {For_uid:1, For_title: 'Smile CHIPS薯片', For_content: '超级好吃,超级脆薯片', For_money: 8},
            {For_uid:2, For_title: 'Smile Scanwith三明治', For_content: '周末专享小饰品', For_money: 12 }
        ]
    },
    showPop(e){
        this.setData({showPop:!this.data.showPop})
    },
    setNum(e) {
        var ds = e.target.dataset;
        var item = this.data.goods.find(i => i.For_uid == ds.title);
        if(item.num!=undefined){//产品信息已经添加num属性走这个分支
          if (ds.op == '-') item.num--;
          else item.num++;
        }
        else item.num=1;//未定义num则默认赋值为1
        var sum=0;
        this.data.goods.forEach(i=>{console.log(i.num);sum+=i.num||0});

        this.setData({ goods: this.data.goods,sum:sum });
    }
});

在watch实时监听数据,产品数据循环的总数就是袋子里面的数值

1.获取item中xxx的值

平时我们如果想获取点击的item的某一个属性值,直接通过data-name="{{item.xxx}}"就可以获取item中xxx的值。

获取xxx的值

choseDate: function(e) {
var that = this;

var index = parseInt(e.currentTarget.dataset.index);

var xxx= e.currentTarget.dataset.name;

},

这样就获取到了item中xxx的值

2.如果想获取点击的item中的任意值

这里将原来的data-name="{{item.xxx}}"换成data-bean="{{item}}"就可以了。然后再接收值的地方做如下更改

choseDate: function(e) {
var that = this;

var index = parseInt(e.currentTarget.dataset.index);

var itemData = e.currentTarget.dataset.bean;

that.setData({
selectGeoId: itemData.GEOID,

selectDate: itemData.Date,

})

// console.log("****************点击的GEOID=" + JSON.stringify(itemData) + "分解的GEOID=" + that.data.selectGeoId + "分解的日期=" + that.data.selectDate);

that.getReportDetails("");

},

这里的itemData就是获取的item对象,itemData.xxx就可以获取itemData对象中的任意一个值

不贴代码咋跟你说怎么改?

微信小程序开发——wx:for形成列表,获得item信息_A Lonely Potatoe-CSDN博客 1.获得循环下标首先,从wx:for的定义所在行处,获得此次循环的下标解释:起作用的是wx:for-index="categoryIndex"利用wx:for-index可以得到此次循环的下标,再利用该语句,就可以将下标存在变量categoryIndex中。(其实相当于categoryIndex=index,但由于微信开发的语法结构,只能用上面那么写)2.item中设置监听... https://blog.csdn.net/qq_41168765/article/details/103735843?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%A6%82%E4%BD%95%E8%8E%B7%E5%8F%96item%E5%86%85%E5%AE%B9&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-.first_rank_v2_pc_rank_v29&spm=1018.2226.3001.4449