提交 dc06dd5c 编写于 作者: 杜庆泉's avatar 杜庆泉

swiper 示例补充

上级 9f587cf5
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<view> <view>
<page-head title="swiper,可滑动视图"></page-head> <page-head title="swiper,可滑动视图"></page-head>
<view class="uni-margin-wrap"> <view class="uni-margin-wrap">
<swiper class="swiper" :vertical="verticalSelect" :indicator-dots="dotsSelect" :autoplay="autoplaySelect" :interval="intervalSelect" :circular="circularSelect" :indicator-color="indicatorColor" :indicator-active-color="indicatorColorActive" :current="currentVal" :current-item-id="currentItemIdVal"> <swiper class="swiper" :vertical="verticalSelect" :indicator-dots="dotsSelect" :autoplay="autoplaySelect" :interval="intervalSelect" :circular="circularSelect" :indicator-color="indicatorColor" :indicator-active-color="indicatorColorActive" :disable-touch="disableTouchSelect" :current="currentVal" :current-item-id="currentItemIdVal" @change="swiperChange" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
<swiper-item item-id="A"> <swiper-item item-id="A">
<view class="swiper-item uni-bg-red">A</view> <view class="swiper-item uni-bg-red">A</view>
</swiper-item> </swiper-item>
...@@ -47,7 +47,14 @@ ...@@ -47,7 +47,14 @@
<view class="uni-list-cell-db">指定current-item-id为最后一个元素</view> <view class="uni-list-cell-db">指定current-item-id为最后一个元素</view>
<switch :checked="currentItemIdSelect" @change="currentItemIdChange"/> <switch :checked="currentItemIdSelect" @change="currentItemIdChange"/>
</view> </view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">禁止用户 touch 操作</view>
<switch :checked="disableTouchSelect" @change="disableTouchChange"/>
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">swiperTransition 是否打印</view>
<switch :checked="swiperTransitionSelect" @change="swiperTransitionChange"/>
</view>
</view> </view>
...@@ -70,19 +77,43 @@ ...@@ -70,19 +77,43 @@
indicatorColor:"", indicatorColor:"",
indicatorColorActive:"", indicatorColorActive:"",
currentVal:0, currentVal:0,
currentItemIdVal:"" currentItemIdVal:"",
disableTouchSelect:false,
swiperTransitionSelect:false
} }
}, },
methods: { methods: {
swiperChange: function (e : SwiperChangeEvent) {
console.log("swiperChange")
console.log(e)
},
swiperTransition: function (e : SwiperTransitionEvent) {
if(this.swiperTransitionSelect){
console.log("swiperTransition")
console.log(e)
}
},
swiperAnimationfinish: function (e : SwiperAnimationFinishEvent) {
console.log("swiperAnimationfinish")
console.log(e)
},
dotsChange: function (e : SwitchChangeEvent) { dotsChange: function (e : SwitchChangeEvent) {
this.dotsSelect = e.detail.value this.dotsSelect = e.detail.value
}, },
swiperTransitionChange: function (e : SwitchChangeEvent) {
this.swiperTransitionSelect = e.detail.value
},
autoplayChange: function (e : SwitchChangeEvent) { autoplayChange: function (e : SwitchChangeEvent) {
this.autoplaySelect = e.detail.value this.autoplaySelect = e.detail.value
}, },
verticalChange: function (e : SwitchChangeEvent) { verticalChange: function (e : SwitchChangeEvent) {
this.verticalSelect = e.detail.value this.verticalSelect = e.detail.value
}, },
disableTouchChange: function (e : SwitchChangeEvent) {
this.disableTouchSelect = e.detail.value
},
currentItemIdChange: function (e : SwitchChangeEvent) { currentItemIdChange: function (e : SwitchChangeEvent) {
this.currentItemIdSelect = e.detail.value this.currentItemIdSelect = e.detail.value
if(this.currentItemIdSelect){ if(this.currentItemIdSelect){
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册