swiper和switch组件

初始界面如下图所示此时swiper组件元素显示红色背景和“井冈山精神”四个字指示点switch组件被选中其它switch组件没有选中此时可以手动播放swiper组件。、选中衔接滑动switch组件后可以衔接滑动。所谓衔接滑动是指播放完一轮后不会退回到初始位置播放而是沿着同一方向进入下一轮播放。index.wxml文件view classweui-navigation-bar {{extClass}} view classweui-navigation-bar__inner {{ios ? ios : android}} stylecolor: {{color}}; background: {{background}}; {{displayStyle}}; {{innerPaddingRight}}; {{safeAreaTop}}; !-- 左侧按钮 -- view classweui-navigation-bar__left style{{leftWidth}}; block wx:if{{back || homeButton}} !-- 返回上一页 -- block wx:if{{back}} view classweui-navigation-bar__buttons weui-navigation-bar__buttons_goback view bindtapback classweui-navigation-bar__btn_goback_wrapper hover-classweui-active hover-stay-time100 aria-rolebutton aria-label返回 view classweui-navigation-bar__button weui-navigation-bar__btn_goback/view /view /view /block !-- 返回首页 -- block wx:if{{homeButton}} view classweui-navigation-bar__buttons weui-navigation-bar__buttons_home view bindtaphome classweui-navigation-bar__btn_home_wrapper hover-classweui-active aria-rolebutton aria-label首页 view classweui-navigation-bar__button weui-navigation-bar__btn_home/view /view /view /block /block block wx:else slot nameleft/slot /block /view !-- 标题 -- view classweui-navigation-bar__center view wx:if{{loading}} classweui-navigation-bar__loading aria-rolealert view classweui-loading aria-roleimg aria-label加载中 /view /view block wx:if{{title}} text{{title}}/text /block block wx:else slot namecenter/slot /block /view !-- 右侧留空 -- view classweui-navigation-bar__right slot nameright/slot /view /view /viewindex.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协同控制支持自定义背景、文字内容及播放模式提升交互体验。