diff --git a/pages/component/swiper/swiper.uvue b/pages/component/swiper/swiper.uvue index 5dd1eb6525c6ffae24a986c7297d974777a144d2..3c389646dcb31a38e4f87cfda016772ed9b83e8f 100644 --- a/pages/component/swiper/swiper.uvue +++ b/pages/component/swiper/swiper.uvue @@ -2,7 +2,7 @@ - + A @@ -14,6 +14,30 @@ + + + 是否显示面板指示点 + + + + 是否自动切换 + + + + 是否循环 + + + 间隔时间 + + + + + 定制指示器颜色 + + + + + @@ -23,14 +47,42 @@ data() { return { background: ['color1', 'color2', 'color3'], - indicatorDots: true, - autoplay: true, interval: 2000, - duration: 500 + dotsSelect:false, + autoplaySelect:false, + circularSelect:false, + indicatorColorSelect:false, + intervalSelect:1000, + indicatorColor:"", + indicatorColorActive:"", } }, methods: { - + dotsChange: function (e : SwitchChangeEvent) { + this.dotsSelect = e.detail.value + }, + autoplayChange: function (e : SwitchChangeEvent) { + this.autoplaySelect = e.detail.value + }, + circularChange: function (e : SwitchChangeEvent) { + this.circularSelect = e.detail.value + console.log(this.circularSelect) + }, + sliderChange(e : SliderChangeEvent) { + this.intervalSelect = e.detail.value + }, + indicatorColorChange(e : SwitchChangeEvent) { + this.indicatorColorSelect = e.detail.value + if(this.indicatorColorSelect){ + // 选择了定制指示器颜色 + this.indicatorColor = "#ff00ff" + this. indicatorColorActive = "#0000ff" + }else{ + // 没有选择颜色 + this.indicatorColor = "" + this. indicatorColorActive = "" + } + } } } @@ -44,6 +96,7 @@ height: 300rpx; } .swiper-item { + width: 100%; height: 300rpx; line-height: 300rpx; text-align: center;