init
This commit is contained in:
52
xhs-mini-demos/component-case/swiper/swiper.css
Normal file
52
xhs-mini-demos/component-case/swiper/swiper.css
Normal file
@@ -0,0 +1,52 @@
|
||||
button {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
button:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.page-section-title {
|
||||
padding: 0;
|
||||
}
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
height: 150px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
}
|
||||
.page-section-title {
|
||||
margin-top: 30px;
|
||||
position: relative;
|
||||
}
|
||||
.info {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: #353535;
|
||||
font-size: 15px;
|
||||
}
|
||||
.page-foot {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.control-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.slider-outer {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.demo-text-1 {
|
||||
background-color: rgba(255, 36, 65);
|
||||
}
|
||||
|
||||
.demo-text-2 {
|
||||
background-color: rgba(255, 36, 65, 0.7);
|
||||
}
|
||||
|
||||
.demo-text-3 {
|
||||
background-color: rgba(255, 36, 65, 0.5);
|
||||
}
|
||||
93
xhs-mini-demos/component-case/swiper/swiper.js
Normal file
93
xhs-mini-demos/component-case/swiper/swiper.js
Normal file
@@ -0,0 +1,93 @@
|
||||
Page({
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: 'swiper',
|
||||
path: 'page/component/pages/swiper/swiper',
|
||||
};
|
||||
},
|
||||
|
||||
data: {
|
||||
background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
|
||||
indicatorDots: true,
|
||||
indicatorColor: 'gray',
|
||||
indicatorActiveColor: 'yellow',
|
||||
vertical: false,
|
||||
autoplay: false,
|
||||
circular: true,
|
||||
current: 0,
|
||||
interval: 2000,
|
||||
duration: 500,
|
||||
src: '',
|
||||
nextMargin: '40rpx',
|
||||
},
|
||||
|
||||
onReady() {
|
||||
setTimeout(() => {
|
||||
this.setData({
|
||||
src: 'https://b.bdstatic.com/searchbox/icms/searchbox/images/demo.webp',
|
||||
});
|
||||
|
||||
this.setData({
|
||||
height: 180,
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
changeIndicatorDots() {
|
||||
this.setData({
|
||||
indicatorDots: !this.data.indicatorDots,
|
||||
});
|
||||
},
|
||||
|
||||
changeAutoplay() {
|
||||
this.setData({
|
||||
autoplay: !this.data.autoplay,
|
||||
});
|
||||
},
|
||||
|
||||
changeVertical() {
|
||||
this.setData({
|
||||
vertical: !this.data.vertical,
|
||||
});
|
||||
},
|
||||
|
||||
changeCircular() {
|
||||
this.setData({
|
||||
circular: !this.data.circular,
|
||||
});
|
||||
},
|
||||
|
||||
changeCurrent({ detail }) {
|
||||
this.setData({
|
||||
current: parseInt(detail.value, 10),
|
||||
});
|
||||
},
|
||||
|
||||
changeIndicatorColor({ detail }) {
|
||||
this.setData({
|
||||
indicatorColor: detail.value,
|
||||
});
|
||||
},
|
||||
|
||||
changeIndicatorActiveColor({ detail }) {
|
||||
this.setData({
|
||||
indicatorActiveColor: detail.value,
|
||||
});
|
||||
},
|
||||
|
||||
intervalChange(e) {
|
||||
this.setData({
|
||||
interval: e.detail.value,
|
||||
});
|
||||
},
|
||||
|
||||
durationChange(e) {
|
||||
this.setData({
|
||||
duration: e.detail.value,
|
||||
});
|
||||
},
|
||||
|
||||
onChange(e) {
|
||||
console.log('swiper bindChange', e);
|
||||
},
|
||||
});
|
||||
6
xhs-mini-demos/component-case/swiper/swiper.json
Normal file
6
xhs-mini-demos/component-case/swiper/swiper.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"navigationBarTitleText": "滑块视图容器",
|
||||
"usingComponents": {
|
||||
"showbox": "../../common/component/showbox/index"
|
||||
}
|
||||
}
|
||||
111
xhs-mini-demos/component-case/swiper/swiper.xhsml
Normal file
111
xhs-mini-demos/component-case/swiper/swiper.xhsml
Normal file
@@ -0,0 +1,111 @@
|
||||
<view class="container">
|
||||
<showbox title="基础展示">
|
||||
<swiper
|
||||
indicator-dots="{{indicatorDots}}"
|
||||
autoplay="{{autoplay}}"
|
||||
current="{{current}}"
|
||||
vertical="{{vertical}}"
|
||||
interval="{{interval}}"
|
||||
duration="{{duration}}"
|
||||
circular="{{circular}}"
|
||||
indicator-color="{{indicatorColor}}"
|
||||
indicator-active-color="{{indicatorActiveColor}}"
|
||||
previous-margin="10px"
|
||||
next-margin="10px"
|
||||
bindchange="onChange"
|
||||
>
|
||||
<block xhs:for="{{background}}" xhs:key="*this">
|
||||
<swiper-item>
|
||||
<view class="swiper-item {{item}}">{{item}}</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</showbox>
|
||||
|
||||
<showbox title="可控制swiper">
|
||||
<swiper
|
||||
indicator-dots="{{indicatorDots}}"
|
||||
autoplay="{{autoplay}}"
|
||||
current="{{current}}"
|
||||
vertical="{{vertical}}"
|
||||
interval="{{interval}}"
|
||||
duration="{{duration}}"
|
||||
circular="{{circular}}"
|
||||
indicator-color="{{indicatorColor}}"
|
||||
indicator-active-color="{{indicatorActiveColor}}"
|
||||
previous-margin="10px"
|
||||
next-margin="10px"
|
||||
bindchange="onChange"
|
||||
>
|
||||
<block xhs:for="{{background}}" xhs:key="*this">
|
||||
<swiper-item>
|
||||
<view class="swiper-item {{item}}">{{item}}</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
<view class="control-container">
|
||||
<view class="control-line split-line-bottom">
|
||||
<view class="control-line-text">指示点</view>
|
||||
<view class="control-line-button">
|
||||
<switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" color="red"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="control-line split-line-bottom">
|
||||
<view class="control-line-text">自动播放</view>
|
||||
<view class="control-line-button">
|
||||
<switch checked="{{autoplay}}" bindchange="changeAutoplay" color="red"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="control-line split-line-bottom">
|
||||
<view class="control-line-text">是否循环播放</view>
|
||||
<view class="control-line-button">
|
||||
<switch checked="{{circular}}" bindchange="changeCircular" color="red"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="control-line">
|
||||
<view class="control-line-text">是否垂直</view>
|
||||
<view class="control-line-button">
|
||||
<switch checked="{{vertical}}" bindchange="changeVertical" color="red"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</showbox>
|
||||
|
||||
<!-- <showbox title="与video组件联动">
|
||||
<swiper
|
||||
indicator-dots="{{indicatorDots}}"
|
||||
autoplay="{{autoplay}}"
|
||||
current="{{current}}"
|
||||
vertical="{{vertical}}"
|
||||
interval="{{interval}}"
|
||||
duration="{{duration}}"
|
||||
circular="{{circular}}"
|
||||
indicator-color="{{indicatorColor}}"
|
||||
indicator-active-color="{{indicatorActiveColor}}"
|
||||
previous-margin="10px"
|
||||
next-margin="40rpx"
|
||||
bindchange="onChange"
|
||||
>
|
||||
<block xhs:for="{{background}}" xhs:key="*this">
|
||||
<swiper-item>
|
||||
<video id="myVideo" autoplay="{{true}}" style="height:{{height}}px" src="https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4"></video>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</showbox>
|
||||
|
||||
<showbox title="幻灯片切换时长(ms)">
|
||||
<view class="slider-outer">
|
||||
<slider bindchange="durationChange" value="{{duration}}" min="500" max="2000" active-color="red"/>
|
||||
</view>
|
||||
</showbox>
|
||||
|
||||
<showbox title="自动播放间隔时长(ms)">
|
||||
<view class="slider-outer">
|
||||
<slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000" active-color="red"/>
|
||||
</view>
|
||||
</showbox> -->
|
||||
</view>
|
||||
Reference in New Issue
Block a user