小程序图片列表实现

最新推荐文章于 2024-06-20 13:22:22 发布

我爱写程序

最新推荐文章于 2024-06-20 13:22:22 发布

阅读量1.4k

点赞数

分类专栏：微信小程序文章标签：小程序实现图片列表

本文链接：https://blog.csdn.net/st526403649/article/details/110958637

版权

微信小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

小程序实现图片列表
效果如下图
在这里插入图片描述
wxml文件

<view >
  <van-tabs class="tab" active="{{1}}" type="card" color="#07C160" swipeable="true">
    <van-tab title="美女">
      <view class="picture_list">
        <block wx:for="{{images}}" wx:for-item="image" wx:key="{{index}}">
            <view class="picture_box" data-index="{{index}}">
              <image class="img" src="{{image.imgUrl}}" data-src="{{image.imgUrl}}" bindtap="previewImage"></image>
            </view>
        </block>
      </view>
    </van-tab>
    <van-tab title="名车">
      <view class="picture_list">
        <block wx:for="{{carImages}}" wx:for-item="image" wx:key="{{index}}">
            <view class="picture_box" data-index="{{index}}">
              <image class="img" src="{{image.imgUrl}}" data-src="{{image.imgUrl}}" bindtap="previewImage"></image>
            </view>
        </block>
      </view>
    </van-tab>
    <van-tab title="风景">
      <view class="picture_list">
        <block wx:for="{{sightsImages}}" wx:for-item="image" wx:key="{{index}}">
            <view class="picture_box" data-index="{{index}}">
              <image class="img" src="{{image.imgUrl}}" data-src="{{image.imgUrl}}" bindtap="previewImage"></image>
            </view>
        </block>
      </view>
    </van-tab>
  </van-tabs>
</view>

wxss文件

.container{
  padding: 2rpx;
}
.picture_list{
  width: 100%;
  display:flex; 
  flex-direction:row; 
  flex-wrap:wrap; 
  background-color: black;
  margin-top: 20rpx;
}
.picture_box{
  flex-shrink:0; 
  box-sizing:border-box; 
  width:50%; 
  height: 400rpx;
  padding:5px; 
}
.img{
  width:100%; 
  height:100%; 
}
.tab{
  margin-top: 20rpx;
}
.tabItem{
  margin-top: 10rpx;
}