微信小程序自定义纵向轮播图

执波仔丶

已于 2023-06-06 13:47:06 修改

阅读量597

点赞数 1

文章标签：轮播图前端微信小程序

于 2023-06-06 11:15:34 首次发布

本文链接：https://blog.csdn.net/weixin_38984353/article/details/131063867

版权

本文介绍了如何在微信小程序中自定义纵向轮播图，以满足特定的展示需求。默认的轮播组件无法达到预期效果，通过改造代码，成功实现了所需的纵向滚动功能。

摘要由CSDN通过智能技术生成

小程序轮播组件虽然支持纵向滚动，但是效果不满足客户老板需求，没法又只能自己改造了。

直接上效果

wxml

<view class="swiper-container">
    <!-- 新版本轮播 -->
    <view class="banner-list" bind:touchstart="handletouchtart" bind:touchmove="handletouchmove" bind:touchend="handletouchend">
        <image wx:for="{{slider}}"  bindtap="goPage" data-url="{{item.url}}" wx:key="index" src="{{item.picUrl}}" animation="{{item.animation}}"  class="img-{{item.idx}} banner-list-img"></image>
    </view>
</view>

轮播图视频