微信设置图片并排排列

最新推荐文章于 2024-09-12 07:59:21 发布

abcdefghijk12345636

最新推荐文章于 2024-09-12 07:59:21 发布

阅读量1.3k

点赞数

分类专栏： 123

本文链接：https://blog.youkuaiyun.com/hujgg/article/details/118305576

版权

123 专栏收录该内容

38 篇文章

订阅专栏

<view class="tabs_photo">
  <van-tabs active="{{ active }}">
  <van-tab title="全部图片">
    <scroll-view scroll-x="true"> 
      <view class="banner" scroll-x="true"> 
           <view class="banner_Item"  wx:for="{{PhotoList}}" wx:key="index"> 
            <image src="{{url}}{{item.fileid}}" data-a="{{item.fileid}} " data-index="{{index}}"    bindtap='showImg' alt=""></image>
          </view> 
        
      </view> 
</scroll-view> 


</van-tab>
  <van-tab title="楼盘图">    
    <scroll-view scroll-x="true"> 
      <view class="banner" scroll-x="true"> 
           <view class="banner_Item"  wx:for="{{lp}}" wx:key="index"> 
            <image src="{{url}}{{item.fileid}}"  data-index="{{index}}"    bindtap='showImgs'  alt=""></image>
          </view> 
        
      </view> 
</scroll-view> 
  </van-tab>
  <van-tab title="沙盘图">      
     <scroll-view scroll-x="true"> 
      <view class="banner" scroll-x="true"> 
           <view class="banner_Item"  wx:for="{{sp}}" wx:key="index"> 
            <image src="{{url}}{{item.fileid}}" data-index="{{index}}"    bindtap='showImgss' alt=""></image>
          </view> 
        
      </view> 
</scroll-view> 
</van-tab>
  <van-tab title="样板间">    
    <scroll-view scroll-x="true"> 
      <view class="banner" scroll-x="true"> 
           <view class="banner_Item"  wx:for="{{yb}}" wx:key="index"> 
            <image src="{{url}}{{item.fileid}}" data-index="{{index}}"    bindtap='showImgsss' alt=""></image>
          </view> 
        
      </view> 
</scroll-view> 
  </van-tab>
  <van-tab title="位置图">
    <scroll-view scroll-x="true"> 
      <view class="banner" scroll-x="true" > 
           <view class="banner_Item"  wx:for="{{wz}}" wx:key="index"> 
            <image src="{{url}}{{item.fileid}}"  data-index="{{index}}"    bindtap='wzt' alt=""></image>
          </view> 
        
      </view> 
</scroll-view> 
  </van-tab>
  <van-tab title="售楼处">
    <scroll-view scroll-x="true"> 
      <view class="banner" scroll-x="true"> 
           <view class="banner_Item"  wx:for="{{sl}}" wx:key="index"> 
            <image src="{{url}}{{item.fileid}}"   data-index="{{index}}"    bindtap='slc' alt=""></image>
          </view> 
        
      </view> 
</scroll-view> 
  </van-tab>
</van-tabs>
</view>

.tabs_photo{
  margin-bottom:100rpx ;
}

.banner{
  margin-top: 30rpx;
  height:220rpx; 
  width:100%;
  display: flex;
  display: -webkit-box;
  flex-direction: column;
} 
.banner_Item{ 
 width: 240rpx;
 height: 180rpx;
 margin-right:10rpx;
} 
.banner_Item image{
  width: 100%;
  height: 100%;
}
button{
  width: 100%;
}

  
//data中数据
  lp:[],
    sp:[],
    yb:[],
    wz:[],
    sl:[],
    url:url.baseUrl,
    PhotoLists:'',
    lps:'',
    sps:'',
    ybs:'',
    wzs:'',
    sls:'',

 showImg:function(e){

      var that=this;
      var a=that.data.PhotoList
      var PhotoLists=[]
      for(var i=0;i<a.length;i++){
        PhotoLists.push(url.baseUrl+a[i].fileid)
      }
      this.setData({
        PhotoLists:PhotoLists
      })
  
  
      var b=url.baseUrl+that.data.PhotoList[e.currentTarget.dataset.index].fileid
  
      wx.previewImage({
          urls: this.data.PhotoLists,
          current: b
      })
    },
  
    showImgs:function(e){
  
      var that=this;
      var a=that.data.lp
      var PhotoLists=[]
      for(var i=0;i<a.length;i++){
        PhotoLists.push(url.baseUrl+a[i].fileid)
      }
      this.setData({
        lps:PhotoLists
      })
  
  
      var b=url.baseUrl+that.data.lp[e.currentTarget.dataset.index].fileid
      wx.previewImage({
          urls: this.data.lps,
          current: b
      })
    },
  
    showImgss:function(e){
  
      var that=this;
      var a=that.data.sp
      var PhotoLists=[]
      for(var i=0;i<a.length;i++){
        PhotoLists.push(url.baseUrl+a[i].fileid)
      }
      this.setData({
        sps:PhotoLists
      })
  
  
      var b=url.baseUrl+that.data.sp[e.currentTarget.dataset.index].fileid
      wx.previewImage({
          urls: this.data.sps,
          current: b
      })
    },
  
  
    showImgsss:function(e){
  
      var that=this;
      var a=that.data.yb
      var PhotoLists=[]
      for(var i=0;i<a.length;i++){
        PhotoLists.push(url.baseUrl+a[i].fileid)
      }
      this.setData({
        ybs:PhotoLists
      })
  
  
      var b=url.baseUrl+that.data.yb[e.currentTarget.dataset.index].fileid
      wx.previewImage({
          urls: this.data.ybs,
          current: b
      })
    },
  
    wzt:function(e){
  
      var that=this;
      var a=that.data.wz
      var PhotoLists=[]
      for(var i=0;i<a.length;i++){
        PhotoLists.push(url.baseUrl+a[i].fileid)
      }
      this.setData({
        wzs:PhotoLists
      })
  
  
      var b=url.baseUrl+that.data.wz[e.currentTarget.dataset.index].fileid
      wx.previewImage({
          urls: this.data.wzs,
          current: b
      })
    },
  
    slc:function(e){
  
      var that=this;
      var a=that.data.sl
      var PhotoLists=[]
      for(var i=0;i<a.length;i++){
        PhotoLists.push(url.baseUrl+a[i].fileid)
      }
      this.setData({
        sls:PhotoLists
      })
  
  
      var b=url.baseUrl+that.data.sl[e.currentTarget.dataset.index].fileid
      wx.previewImage({
          urls: this.data.sls,
          current: b
      })
    },