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

欢迎来前群里探讨技术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>



评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值