小程序 获取数据下标和两层wx:for的下标方法 用于点击各个图集看图

js看图代码

  //点击查看图片
  previewImg: function (e) {
    console.log(e.currentTarget.dataset.index);
    var imgArr = [];
	    //e.currentTarget.dataset.ddid图集的下标id。外层的
	    //e.currentTarget.dataset.id图集的某个图片下标id 里层的
    var imgArrs = this.data.list[e.currentTarget.dataset.ddid].pic[e.currentTarget.dataset.id];
    	//他必须是数组的,我把他对象转成数组了
    var imgArr = [imgArrs];
    console.log(imgArrs)
    wx.previewImage({
      current: e.currentTarget.dataset.index, //当前图片地址 必须是线上的图片
      urls: imgArr, //所有要预览的图片的地址集合 数组形式 
      success: function (res) {
        console.log(res)
      },
    })
  },

图片单图查看

在这里插入图片描述图片多图查看 把对象转成数组


  //当图集点击查看
  previewImg_a: function (e) {
    console.log(e.currentTarget.dataset.index);
    var imgArr = [];
    var imgArrs = this.data.list[e.currentTarget.dataset.ddid].pic;
    //把对象转成数组
    for (var i in imgArrs) {
      imgArr.push(imgArrs[i]);
    }
    // var imgArr = [imgArrs];
    // console.log(imgArrs)
    // console.log(imgArr)
    wx.previewImage({
      current: e.currentTarget.dataset.index, //当前图片地址 必须是线上的图片
      urls: imgArr, //所有要预览的图片的地址集合 数组形式 
      success: function (res) {
        console.log(res)
      },
    })
  },

图片
在这里插入图片描述

wxml页面的代码

<!-- 标题 -->
<scroll-view style="height:{{windowHeight}}px;" bindscrolltolower="loadMore" bindscroll="onScroll" lower-threshold="600" scroll-y="true">
										这里外层的要把下标申明取名字
<view  hidden="{{!showList}}" class='pag' wx:for="{{list}}" wx:key wx:for-index='keys' wx:for-item='itemaa'>
    <view class='geps'>
        <view class="bian" bindtap='userinfo'>
            <image class='img' src='{{itemaa.uid.avatar}}?x-oss-process=image/resize,p_40'></image>
              <view class='tete'>
                  <view class='tetle'>{{itemaa.uid.nickname}}</view>
                  <view wx:if='{{itemaa.uid.Remarks!==""}}' class='text'>({{itemaa.uid.Remarks}})</view>
              </view>
        </view>
        <view class="caoz">
            <button class='buttons' bindtap='picdel' data-id='{{itemaa.id}}' wx:if="{{itemaa.qx==true || itemaa.qx==false}}">删除</button>
        </view>
    </view>
    <!-- 图片 --> 
    //这里里层的要把下标申明取名字 但不能跟外层的一样 然后打印取值
    <view class='pic' wx:for="{{itemaa.pic}}" wx:key wx:for-index='key' wx:for-item='item'>
        <image lazy-load="true" class='img1' src='{{item}}?x-oss-process=image/auto-orient,1/resize,p_50' mode='aspectFill' bindtap="previewImg" data-index='{{item}}' data-id="{{key}}" data-ddid="{{keys}}"></image>
    </view>
</view>

在这里插入图片描述获取到的数据图

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_42021688/article/details/86693062