0
点赞
收藏
分享

微信扫一扫

【Kevin Learn 小程序】-->swiper

效果图

【Kevin Learn 小程序】-->swiper_json

属性

参考:​​swiper​​

实例

  1. app.js
//app.js
App({
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
},
globalData: {
hasLogin: false
}
})
  1. app.json
{
"pages": [
"pages/swiper/swiper"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
  1. swiper.wxml
<!--pages/swiper/swiper.wxml-->
<view>swiper组件</view>
<view class="section">
<view class="page-body">
<view class="page-section page-section-spacing swiper">
<swiper
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
bindchange="change"
bindanimationfinish="animationfinish"
>
<block wx:for="{{background}}" wx:key="*this">
<swiper-item>
<view class="swiper-item {{item}}"></view>
</swiper-item>
</block>
</swiper>
</view>
<view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_switch">
<view class="weui-cell__bd">指示点</view>
<view class="weui-cell__ft">
<switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />
</view>
</view>
<view class="weui-cell weui-cell_switch">
<view class="weui-cell__bd">自动播放</view>
<view class="weui-cell__ft">
<switch checked="{{autoplay}}" bindchange="changeAutoplay" />
</view>
</view>
</view>
</view>

<view class="page-section page-section-spacing">
<view class="page-section-title">
<text>幻灯片切换时长(ms)</text>
<text class="info">{{duration}}</text>
</view>
<slider bindchange="durationChange" value="{{duration}}" min="500" max="2000" />
<view class="page-section-title">
<text>自动播放间隔时长(ms)</text>
<text class="info">{{interval}}</text>
</view>
<slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000" />
</view>
</view>
</view>
  1. swiper.wxss
/* pages/swiper/swiper.wxss */
button{
margin-bottom: 30rpx;
}
button:last-child{
margin-bottom: 0;
}
.page-body {
width: 100%;
}
.page-section-title{
padding: 0;
}
.swiper-item{
display: block;
height: 150px;

}
.page-section-title{
margin-top: 60rpx;
position: relative;
}
.info{
position: absolute;
right: 0;
color: #353535;
font-size: 30rpx;
}
.page-foot{
margin-top: 50rpx;
}
.demo-text-1{
position: relative;
align-items: center;
justify-content: center;
background-color: #1AAD19;
color: #FFFFFF;
font-size: 36rpx;
}
.demo-text-1:before{
content: 'A';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.demo-text-2{
position: relative;
align-items: center;
justify-content: center;
background-color: #2782D7;
color: #FFFFFF;
font-size: 36rpx;
}
.demo-text-2:before{
content: 'B';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.demo-text-3{
position: relative;
align-items: center;
justify-content: center;
background-color: #F1F1F1;
color: #353535;
font-size: 36rpx;
}
.demo-text-3:before{
content: 'C';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
  1. swiper.js
Page({
data: {
background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
indicatorDots: true,
vertical: false,
autoplay: false,
interval: 2000,
duration: 300
},
/**
* swiper api
*/
changeIndicatorDots: function (e) {
console.log('切换指示点开关');
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay: function (e) {
console.log('切换自动播放开关');
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange: function (e) {
console.log(`调整自动播放间隔时长为: ${e.detail.value}ms`);
this.setData({
interval: e.detail.value
})
},
durationChange: function (e) {
console.log(`调整幻灯片切换时长为: ${e.detail.value}ms`);
this.setData({
duration: e.detail.value
})
},
animationfinish: function (e) {
console.log(e);
},
change: function (e) {
console.log(e)
}
})
  1. swiper.json
{
"navigationBarTitleText": "swiper组件"
}


举报

相关推荐

0 条评论