初始界面如下图所示，此时swiper组件元素显示红色背景和“井冈山精神”四个字，指示点switch组件被选中，其它switch组件没有选中，此时可以手动播放swiper组件。、
选中衔接滑动switch组件后，可以衔接滑动。所谓衔接滑动，是指播放完一轮后，不会退回到初始位置播放，而是沿着同一方向进入下一轮播放。
index.wxml文件
<view class="weui-navigation-bar {{extClass}}"> <view class="weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}" style="color: {{color}}; background: {{background}}; {{displayStyle}}; {{innerPaddingRight}}; {{safeAreaTop}};"> <!-- 左侧按钮 --> <view class='weui-navigation-bar__left' style="{{leftWidth}};"> <block wx:if="{{back || homeButton}}"> <!-- 返回上一页 --> <block wx:if="{{back}}"> <view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_goback"> <view bindtap="back" class="weui-navigation-bar__btn_goback_wrapper" hover-class="weui-active" hover-stay-time="100" aria-role="button" aria-label="返回" > <view class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view> </view> </view> </block> <!-- 返回首页 --> <block wx:if="{{homeButton}}"> <view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_home"> <view bindtap="home" class="weui-navigation-bar__btn_home_wrapper" hover-class="weui-active" aria-role="button" aria-label="首页" > <view class="weui-navigation-bar__button weui-navigation-bar__btn_home"></view> </view> </view> </block> </block> <block wx:else> <slot name="left"></slot> </block> </view> <!-- 标题 --> <view class='weui-navigation-bar__center'> <view wx:if="{{loading}}" class="weui-navigation-bar__loading" aria-role="alert"> <view class="weui-loading" aria-role="img" aria-label="加载中" ></view> </view> <block wx:if="{{title}}"> <text>{{title}}</text> </block> <block wx:else> <slot name="center"></slot> </block> </view> <!-- 右侧留空 --> <view class='weui-navigation-bar__right'> <slot name="right"></slot> </view> </view> </view>index.wxss文件
/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .bc-red { background-color: red; } .bc-green { background-color: green; } .bc-blue { background-color: blue; } .common { width: 100%; line-height: 320rpx; font-size: 60rpx; font-weight: bolder; text-align: center; letter-spacing: 1em; color: yellow; } .layout { margin-top: 40rpx; padding: 20rpx; border: 2rpx dashed burlywood; } .waikuang { display: flex; flex-direction: row; border-bottom: 2rpx solid #353535; margin: 20rpx 0; padding: 20rpx 0; } .my-left { flex: 1; } .bc-purple { background-color: purple; }app.wxss文件
/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid silver; } .title { font-size: 40rpx; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }index.js文件
Page({ data: { indicatorDots: true, autoplay: false, circular: false, vertical: false, interval: 2000, duration: 500, background: ['bc-red', 'bc-green', 'bc-blue', 'bc-purple'], text: ['井冈山精神', '长征精神', '延安精神', '西柏坡精神'] }, changeIndicatorDots() { this.setData({ indicatorDots: !this.data.indicatorDots }) }, changeAutoplay() { this.setData({ autoplay: !this.data.autoplay }) }, changeCircular() { this.setData({ circular: !this.data.circular }) }, changeVertical() { this.setData({ vertical: !this.data.vertical }) } })初始界面中，swiper组件显示红色背景及“井冈山精神”文字，指示点switch已选中。通过选中“衔接滑动”开关，可实现播放完一轮后沿同一方向连续循环，不返回起始位置。页面通过WXML、WXSS与JS协同控制，支持自定义背景、文字内容及播放模式，提升交互体验。
