微信小程序横向左右滑动案例

最新推荐文章于 2024-04-07 06:28:33 发布

wy_Blog

最新推荐文章于 2024-04-07 06:28:33 发布

阅读量1.3w

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/wy_Blog/article/details/70234195

版权

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

21 篇文章 0 订阅

订阅专栏

欢迎来前群里探讨技术QQ:454891743

图片左右滑动效果

效果图：

wxml代码：

        <scroll-view scroll-x="true">
        <view class="uploadWrap" scroll-x="true">
          <view class="upload_Item">
            <image class="upload_Item_img"  src="../../image/test1.jpg"></image>
          </view>
          <view class="upload_Item">
            <image class="upload_Item_img"  src="../../image/test2.jpg"></image>
          </view>
          <view class="upload_Item">
            <image class="upload_Item_img"  src="../../image/test3.jpg"></image>
          </view>
          <view class="upload_Item">
            <image class="upload_Item_img"  src="../../image/test4.jpg"></image>
          </view>
          <view class="upload_Item">
            <image class="upload_Item_img"  src="../../image/test1.jpg"></image>
          </view>
          <view class="upload_Item">
            <image class="upload_Item_img"  src="../../image/test2.jpg"></image>
          </view>
          <view class="upload_Item">
            <image class="upload_Item_img"  src="../../image/test3.jpg"></image>
          </view>

        </view>
        </scroll-view>

wxss代码：

.uploadWrap{height:160rpx; width:100%; display: flex; display: -webkit-box; flex-direction: column;}
.upload_Item{ width: 160rpx; height: 160rpx;  flex: 1;}
.upload_Item_img{ width: 160rpx; height: 160rpx;}

wxml从后台获取数据代码：

        <scroll-view scroll-x="true">
          <view class="uploadWrap" scroll-x="true" >
            <view class="upload_Item" wx:for="{{imgUrls}}" wx:key="id">
              <image class="upload_Item_img" src="{{item.imgurl}}"data-id="{{item.id}}" bindtap="changeMainImgFn2"></image>
              <icon type="clear" size="16" class="upload_Btn" color="#f64400"></icon>
              <view class="upload_mask {{upload_ImgSelId2==item.id? 'show':' ' }}">主图</view>
            </view>
          </view>
        </scroll-view>