返回

专注连锁门店会员营销管理系统

线上+线下+进销存+收银+会员
获取验证码
立即登录
HiShop > Hi小程序 > 小程序开发 > 开发实例 >

小程序实现图片左右滚动效果

2020-09-27 作者：黄珊

　　小程序实现图片左右滚动效果

　　小程序实现图片左右滚动，是图片基本的实现效果，那么这种图片左右滚动效果要如何实现?

　　小程序图片左右滚动效果图：

小程序实现图片左右滚动效果

　　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>

HiShop小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。

更多小程序开发案例，尽在：http://www.hishop.com.cn/xiaocx/kaifa.html
 

小程序显示图片相关文章：

小程序加载图片如何实现

小程序开发上传图片如何实现

小程序上传图片组件及上传多张图片


线上+线下+进销存+收银+会员门店零售管理好帮手

  • 极速收银管理

    门店能实现快速收银，提升门店经营效率。

  • 进销存管理

    系统自带进销存管理，更好管理库存销售。

  • 软硬件一体化

    配备收银硬件一站式整体服务。

收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款

获取报价

推荐文章

门店系统 获取报价 立即咨询 免费试用