Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5992
Star 90
Fork 162
H
hello uni-app x
提交 eaa8b7a7 编写于 作者: H hdx
浏览文件
操作

swiper: 调整页面样式，rpx to px

上级 256adf1c
隐藏空白更改
内联 并排
Showing with 204 addition and 203 deletion
pages/component/swiper/swiper.uvue
浏览文件 @ eaa8b7a7
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1"> <scroll-view class="page-scroll-view">
<!-- #endif --> <!-- #endif -->
<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" <swiper class="swiper" :vertical="verticalSelect" :indicator-dots="dotsSelect" :autoplay="autoplaySelect"
:rebound="reboundSelect" :rebound="reboundSelect" :interval="intervalSelect" :circular="circularSelect"
:interval="intervalSelect" :circular="circularSelect" :indicator-color="indicatorColor" :indicator-color="indicatorColor" :indicator-active-color="indicatorColorActive"
:indicator-active-color="indicatorColorActive" :disable-touch="disableTouchSelect" :current="currentVal" :disable-touch="disableTouchSelect" :current="currentVal" :current-item-id="currentItemIdVal"
:current-item-id="currentItemIdVal" @change="swiperChange" @transition="swiperTransition" @change="swiperChange" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
@animationfinish="swiperAnimationfinish"> <swiper-item item-id="A">
<swiper-item item-id="A"> <view class="swiper-item uni-bg-red"><text class="swiper-item-Text">A</text></view>
<view class="swiper-item uni-bg-red"><text class="swiper-item-Text">A</text></view> </swiper-item>
</swiper-item> <swiper-item item-id="B">
<swiper-item item-id="B"> <view class="swiper-item uni-bg-green"><text class="swiper-item-Text">B</text></view>
<view class="swiper-item uni-bg-green"><text class="swiper-item-Text">B</text></view> </swiper-item>
</swiper-item> <swiper-item item-id="C">
<swiper-item item-id="C"> <view class="swiper-item uni-bg-blue"><text class="swiper-item-Text">C</text></view>
<view class="swiper-item uni-bg-blue"><text class="swiper-item-Text">C</text></view> </swiper-item>
</swiper-item> </swiper>
</swiper> </view>
</view> <view class="uni-list">
<view class="uni-list"> <view class="uni-list-cell uni-list-cell-padding">
<view class="uni-list-cell uni-list-cell-pd"> <view class="uni-list-cell-db">是否显示面板指示点</view>
<view class="uni-list-cell-db">是否显示面板指示点</view> <switch :checked="dotsSelect" @change="dotsChange" />
<switch :checked="dotsSelect" @change="dotsChange" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">是否自动切换</view>
<switch :checked="autoplaySelect" @change="autoplayChange" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">是否循环</view>
<switch :checked="circularSelect" @change="circularChange" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">是否显示rebound效果</view>
<switch :checked="reboundSelect" @change="reboundSelectChange" />
</view> </view>
<view class="uni-title">间隔时间(毫秒)</view> <view class="uni-list-cell uni-list-cell-padding">
<view> <view class="uni-list-cell-db">是否自动切换</view>
<slider @change="sliderChange" :value="1000" :min="500" :max="5000" :show-value="true" /> <switch :checked="autoplaySelect" @change="autoplayChange" />
</view> </view>
<view class="uni-list-cell uni-list-cell-pd"> <view class="uni-list-cell uni-list-cell-padding">
<view class="uni-list-cell-db">定制指示器颜色</view> <view class="uni-list-cell-db">是否循环</view>
<switch :checked="indicatorColorSelect" @change="indicatorColorChange" /> <switch :checked="circularSelect" @change="circularChange" />
</view> </view>
<view class="uni-list-cell uni-list-cell-pd"> <view class="uni-list-cell uni-list-cell-padding">
<view class="uni-list-cell-db">纵向</view> <view class="uni-list-cell-db">是否显示rebound效果</view>
<switch :checked="verticalSelect" @change="verticalChange" /> <switch :checked="reboundSelect" @change="reboundSelectChange" />
</view> </view>
<view class="uni-list-cell uni-list-cell-pd"> <view class="uni-title uni-list-cell-padding">间隔时间(毫秒)</view>
<view class="uni-list-cell-db">指定current为最后一个元素</view> <view class="uni-list-cell-padding">
<switch :checked="currentSelect" @change="currentChange" /> <slider @change="sliderChange" :value="1000" :min="500" :max="5000" :show-value="true" />
</view> </view>
<view class="uni-list-cell uni-list-cell-pd"> <view class="uni-list-cell uni-list-cell-padding">
<view class="uni-list-cell-db">指定current-item-id为最后一个元素</view> <view class="uni-list-cell-db">定制指示器颜色</view>
<switch :checked="currentItemIdSelect" @change="currentItemIdChange" /> <switch :checked="indicatorColorSelect" @change="indicatorColorChange" />
</view> </view>
<view class="uni-list-cell uni-list-cell-pd"> <view class="uni-list-cell uni-list-cell-padding">
<view class="uni-list-cell-db">禁止用户 touch 操作</view> <view class="uni-list-cell-db">纵向</view>
<switch :checked="disableTouchSelect" @change="disableTouchChange" /> <switch :checked="verticalSelect" @change="verticalChange" />
</view> </view>
<view class="uni-list-cell uni-list-cell-pd"> <view class="uni-list-cell uni-list-cell-padding">
<view class="uni-list-cell-db">swiperTransition 是否打印</view> <view class="uni-list-cell-db">指定current为最后一个元素</view>
<switch :checked="swiperTransitionSelect" @change="swiperTransitionChange" /> <switch :checked="currentSelect" @change="currentChange" />
</view> </view>
<view class="uni-list-cell uni-list-cell-pd"> <view class="uni-list-cell uni-list-cell-padding">
<view class="uni-list-cell-db">swiperAnimationfinish 是否打印</view> <view class="uni-list-cell-db">指定current-item-id为最后一个元素</view>
<switch :checked="swiperAnimationfinishSelect" @change="swiperAnimationfinishChange" /> <switch :checked="currentItemIdSelect" @change="currentItemIdChange" />
</view> </view>
<view class="uni-list-cell uni-list-cell-pd"> <view class="uni-list-cell uni-list-cell-padding">
<view class="uni-list-cell-db">swiperChange 是否打印</view> <view class="uni-list-cell-db">禁止用户 touch 操作</view>
<switch :checked="swiperChangeSelect" @change="swiperChangeChange" /> <switch :checked="disableTouchSelect" @change="disableTouchChange" />
</view> </view>
</view> <view class="uni-list-cell uni-list-cell-padding">
</view> <view class="uni-list-cell-db">swiperTransition 是否打印</view>
<!-- #ifdef APP --> <switch :checked="swiperTransitionSelect" @change="swiperTransitionChange" />
</scroll-view> </view>
<!-- #endif --> <view class="uni-list-cell uni-list-cell-padding">
<view class="uni-list-cell-db">swiperAnimationfinish 是否打印</view>
<switch :checked="swiperAnimationfinishSelect" @change="swiperAnimationfinishChange" />
</view>
<view class="uni-list-cell uni-list-cell-padding">
<view class="uni-list-cell-db">swiperChange 是否打印</view>
<switch :checked="swiperChangeSelect" @change="swiperChangeChange" />
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
background: ['color1', 'color2', 'color3'], background: ['color1', 'color2', 'color3'],
dotsSelect: false, dotsSelect: false,
reboundSelect:false, reboundSelect: false,
autoplaySelect: false, autoplaySelect: false,
circularSelect: false, circularSelect: false,
indicatorColorSelect: false, indicatorColorSelect: false,
verticalSelect: false, verticalSelect: false,
currentSelect: false, currentSelect: false,
currentItemIdSelect: false, currentItemIdSelect: false,
intervalSelect: 2000, intervalSelect: 2000,
indicatorColor: "", indicatorColor: "",
indicatorColorActive: "", indicatorColorActive: "",
currentVal: 0, currentVal: 0,
currentItemIdVal: "", currentItemIdVal: "",
disableTouchSelect: false, disableTouchSelect: false,
swiperTransitionSelect: false, swiperTransitionSelect: false,
swiperAnimationfinishSelect: false, swiperAnimationfinishSelect: false,
swiperChangeSelect: false, swiperChangeSelect: false,
currentValChange:0 currentValChange: 0
} }
}, },
methods: { methods: {
swiperChange: function (e : SwiperChangeEvent) { swiperChange: function (e : SwiperChangeEvent) {
this.currentValChange = e.detail.current this.currentValChange = e.detail.current
console.log(this.currentValChange) console.log(this.currentValChange)
if (this.swiperChangeSelect) { if (this.swiperChangeSelect) {
console.log("swiperChange") console.log("swiperChange")
console.log(e) console.log(e)
} }
}, },
swiperTransition: function (e : SwiperTransitionEvent) { swiperTransition: function (e : SwiperTransitionEvent) {
if (this.swiperTransitionSelect) { if (this.swiperTransitionSelect) {
console.log("swiperTransition") console.log("swiperTransition")
console.log(e) console.log(e)
} }
}, },
swiperAnimationfinish: function (e : SwiperAnimationFinishEvent) { swiperAnimationfinish: function (e : SwiperAnimationFinishEvent) {
if (this.swiperAnimationfinishSelect) { if (this.swiperAnimationfinishSelect) {
console.log("swiperAnimationfinish") console.log("swiperAnimationfinish")
console.log(e) 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) { swiperTransitionChange: function (e : SwitchChangeEvent) {
this.swiperTransitionSelect = e.detail.value this.swiperTransitionSelect = e.detail.value
}, },
swiperChangeChange: function (e : SwitchChangeEvent) { swiperChangeChange: function (e : SwitchChangeEvent) {
this.swiperChangeSelect = e.detail.value this.swiperChangeSelect = e.detail.value
}, },
swiperAnimationfinishChange: function (e : SwitchChangeEvent) { swiperAnimationfinishChange: function (e : SwitchChangeEvent) {
this.swiperAnimationfinishSelect = e.detail.value this.swiperAnimationfinishSelect = 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) { disableTouchChange: function (e : SwitchChangeEvent) {
this.disableTouchSelect = e.detail.value 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) {
this.currentItemIdVal = 'C' this.currentItemIdVal = 'C'
} else { } else {
this.currentItemIdVal = 'A' this.currentItemIdVal = 'A'
} }
}, },
currentChange: function (e : SwitchChangeEvent) { currentChange: function (e : SwitchChangeEvent) {
this.currentSelect = e.detail.value this.currentSelect = e.detail.value
if (this.currentSelect) { if (this.currentSelect) {
this.currentVal = 2 this.currentVal = 2
} else { } else {
this.currentVal = 0 this.currentVal = 0
} }
},
circularChange: function (e : SwitchChangeEvent) {
this.circularSelect = e.detail.value
console.log(this.circularSelect)
},
reboundSelectChange: function (e : SwitchChangeEvent) {
this.reboundSelect = e.detail.value
console.log(this.reboundSelect)
}, },
sliderChange(e : SliderChangeEvent) { circularChange: function (e : SwitchChangeEvent) {
this.intervalSelect = e.detail.value this.circularSelect = e.detail.value
}, console.log(this.circularSelect)
indicatorColorChange(e : SwitchChangeEvent) { },
this.indicatorColorSelect = e.detail.value reboundSelectChange: function (e : SwitchChangeEvent) {
if (this.indicatorColorSelect) { this.reboundSelect = e.detail.value
// 选择了定制指示器颜色 console.log(this.reboundSelect)
this.indicatorColor = "#ff00ff" },
this.indicatorColorActive = "#0000ff" sliderChange(e : SliderChangeEvent) {
} else { this.intervalSelect = e.detail.value
// 没有选择颜色 },
this.indicatorColor = "" indicatorColorChange(e : SwitchChangeEvent) {
this.indicatorColorActive = "" this.indicatorColorSelect = e.detail.value
} if (this.indicatorColorSelect) {
} // 选择了定制指示器颜色
} this.indicatorColor = "#ff00ff"
} this.indicatorColorActive = "#0000ff"
} else {
// 没有选择颜色
this.indicatorColor = ""
this.indicatorColorActive = ""
}
}
}
}
</script> </script>
<style> <style>
.uni-margin-wrap { /* #ifdef APP */
width: 690rpx; .page-scroll-view {
width: 100%; flex: 1;
} }
/* #endif */
.swiper { .swiper {
height: 300rpx; height: 150px;
} }
.swiper-item { .swiper-item {
width: 100%; width: 100%;
height: 300rpx; height: 150px;
} }
.swiper-item-Text { .swiper-item-Text {
width: 100%; width: 100%;
text-align: center; text-align: center;
line-height: 300rpx; line-height: 150px;
} }
</style> </style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或