微信小程序 轮播图和滑动效果

一

目录

一轮播图

二图片滑动

---

轮播图

(1)先添加图片到项目理

（2）写代码

swiper:滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。使用 worklet 函数需要开启开发者工具 "将 JS 编译成 ES5" 或 "编译 worklet 函数" 选项。

class:是自定义的css样式

indicator-dots：是否显示面板指示点

interval="3000":  自动切换时间间隔（3000ms）

duration="500" :滑动动画时长

autoplay="true":是否自动切换(true确定)

circular：是否采用衔接滑动

swiper-item：仅可放置在swiper组件中，宽高自动设置为100%

image：图片src:图片路径

（3）写css

width:100%；(宽度100%)

轮播图效果图

二图片滑动

(1)写代码

scroll-view:

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。横向滚动需打开 enable-flex 以兼容 WebView，如 <scroll-view scroll-x enable-flex style="flex-direction: row;"/>滚动条的长度是预估的，若直接子节点的高度差别较大，则滚动条长度可能会不准确使用 worklet 函数需要开启开发者工具 "将 JS 编译成 ES5" 或 "编译 worklet 函数" 选项.

scroll-x:允许横向滚动

(2)写 css

最终效果图