源插件地址
uniapp开发app需要一个启动页轮播切换效果，因为源插件效果，不太符合自己的需求，所以在原代码的基础上微调了一下
guide页面代码
<template>
<view>
<view class="swiper-css zqui-rel" :style="{ height: hpx }">
<swiper class="swiper" :style="{ height: hpx }" :indicator-dots="indicatorDots" :autoplay="autoplay"
:interval="interval" :duration="duration" @change="guideAction">
<swiper-item class="flex1" v-for="(item, index) in imageList" :key="index">
<image class="flex-column image-size" mode="aspectFill" :src="item.src" />
</swiper-item>
</swiper>
<!-- 按钮样式切换 -->
<template v-if="cur != 2">
<view class=" flex-column dots">
<block v-for="(item,index) in imageList" :key="index">
<view class="dot" :class="{'active': index == cur}"></view>
</block>
</view>
</template>
<!-- 第三张图使用按钮《立即进入》 -->
<template v-if="cur == 2">
<button class="flex-column cu-btn footer" @click="launchApp">立即体验</button>
</template>
<!-- 右上角跳过按钮 -->
<view class="btn-box" @click="launchApp"><text class="passbtn">跳过</text></view>
</view>
</view>
</template>
<script>
const animation = weex.requireModule('animation');
export default {
data() {
return {
//修改图片,文字描述
imageList: [{
src: '/static/guide/guide1.jpg'
},
{
src: '/static/guide/guide2.jpg'
},
{
src: '/static/guide/guide3.jpg'
}
],
indicatorDots: false,
autoplay: false,
interval: 10000,
duration: 500,
iStatusBarHeight: '0px',
hpx: '100%',
cur: 0,
dotsStyles: ''
};
},
onLoad() {
let that = this;
plus.navigator.closeSplashscreen();
uni.getSystemInfo({
success: function(res) {
that.hpx = res.windowHeight + 'px';
}
});
},
onReady() {
this.move(0, 1);
},
methods: {
launchApp() {
//跳过引导页,储存本地值,下次进入直接跳过
uni.setStorage({
key: 'launchFlag',
data: true,
success() {
uni.reLaunch({
url: '/pages/home/home'
})
}
});
},
guideAction(event) {
let that = this,
index = event.detail.current;
that.cur = index;
if (index == 0) {
that.move(0, 1);
that.moveTwo(150, 0.1);
that.moveThree(150, 0.1);
that.lefMainAction(0);
}
if (index == 1) {
that.moveTwo(0, 1);
that.move(150, 0.1);
that.moveThree(150, 0.1);
that.lefMainAction(uni.upx2px(80) + 'px');
}
if (index == 2) {
that.moveThree(0, 1);
that.moveTwo(150, 0.1);
that.move(150, 0.1);
that.lefMainAction(uni.upx2px(160) + 'px');
}
},
lefMainAction(mum) {
var testLM = this.$refs.lefMain;
animation.transition(
testLM, {
styles: {
transform: 'translate(' + mum + ',0px)'
},
duration: 400, //ms
timingFunction: 'ease',
delay: 0 //ms
},
function() {}
);
},
move(tran, opa) {
var testEl = this.$refs.box1;
animation.transition(
testEl, {
styles: {
transform: 'translate(' + tran + 'px,0px)',
transformOrigin: 'center center',
opacity: opa
},
duration: 800, //ms
timingFunction: 'ease',
delay: 0 //ms
},
function() {}
);
var textE2 = this.$refs.box2;
animation.transition(
textE2, {
styles: {
transform: 'translate(0px,' + tran + 'px) scale(' + opa + ')',
transformOrigin: 'center center',
opacity: opa
},
duration: 800, //ms
timingFunction: 'ease',
delay: 0 //ms
},
function() {}
);
},
moveTwo(tran, opa) {
var testEl = this.$refs.box3;
animation.transition(
testEl, {
styles: {
transform: 'translate(' + tran + 'px,0px)',
transformOrigin: 'center center',
opacity: opa
},
duration: 800, //ms
timingFunction: 'ease',
delay: 0 //ms
},
function() {}
);
var textE2 = this.$refs.box4;
animation.transition(
textE2, {
styles: {
transform: 'translate(0px,' + tran + 'px) scale(' + opa + ')',
transformOrigin: 'center center',
opacity: opa
},
duration: 800, //ms
timingFunction: 'ease',
delay: 0 //ms
},
function() {}
);
},
moveThree(tran, opa) {
var testEl = this.$refs.box5;
animation.transition(
testEl, {
styles: {
transform: 'translate(' + tran + 'px,0px)',
transformOrigin: 'center center',
opacity: opa
},
duration: 800, //ms
timingFunction: 'ease',
delay: 0 //ms
},
function() {}
);
var textE2 = this.$refs.box6;
animation.transition(
textE2, {
styles: {
transform: 'translate(0px,' + tran + 'px) scale(' + opa + ')',
transformOrigin: 'center center',
opacity: opa
},
duration: 800, //ms
timingFunction: 'ease',
delay: 0 //ms
},
function() {}
);
}
}
};
</script>
<style lang="scss">
page {
background-color: #FFFFFF;
min-height: 100%;
height: 100%;
}
.guide {
flex-direction: column;
flex: 1;
}
.flex1 {
flex: 1;
width: 100%;
background: red;
height: 100%;
}
.image-size {
width: 750rpx;
height: 100%;
position: absolute;
// margin-left: 60rpx;
}
// .title-box {
// padding: 250rpx 0 120rpx 64rpx;
// }
.guide-title {
font-size: 48rpx;
font-weight: bold;
color: rgba(58, 61, 68, 1);
}
.guide-subtitle {
margin-top: 20rpx;
font-size: 35rpx;
color: rgba(131, 136, 146, 1);
line-height: 50rpx;
}
.footer {
width: 231rpx;
height: 80rpx;
text-align: center;
position: fixed;
bottom: 116rpx;
left: 37%;
font-size: 30rpx;
color: #FFFFFF;
background-color: #2B9939;
}
.btn-box {
position: absolute;
z-index: 99999;
right: 40rpx;
top: 120rpx;
}
.dots {
display: flex;
justify-content: center;
position: absolute;
z-index: 999;
height: 151rpx;
left: 0;
right: 0;
bottom: 20rpx;
}
.passbtn {
color: #fff;
text-align: center;
border-width: 1rpx;
border-color: rgba(0, 0, 0, 0.5);
border-style: solid;
border-radius: 30rpx;
font-size: 28rpx;
padding-top: 10rpx;
padding-bottom: 10rpx;
padding-left: 25rpx;
padding-right: 25rpx;
}
.dot {
margin: 0 4rpx;
width: 15rpx;
height: 15rpx;
background: #CDD2DD;
border-radius: 8rpx;
transition: all .6s;
}
.dot.active {
width: 40rpx;
background: #838892 !important;
}
/* 相对定位 */
.zqui-rel {
position: relative;
}
.swiper-css {
width: 750rpx;
}
.swiper-item {
width: 750rpx;
}
</style>
judge代码
<template>
<view class="content"></view>
</template>
<script>
export default {
onLoad() {
this.checkGuide();
},
methods: {
checkGuide() {
uni.redirectTo({
url: '/pages/guide/guide'
});
console.log("进入checkGuide判断页");
// 思路： 检测是否有启动缓存，如果没有，就是第一次启动，第一次启动就去 启动介绍页面
// try {
// var launchFlag = uni.getStorageSync('launchFlag');
// console.log("launchFlag:" + launchFlag);
// if (launchFlag) { //判断本地缓存跳转首页
// uni.redirectTo({
// url: '/pages/home/home'
// });
// } else { //没有缓存进入启动页引导页
// console.log('去引导页');
// uni.redirectTo({
// url: '/pages/guide/guide'
// });
// }
// } catch (e) {
// console.log(e.message);
// }
}
}
};
</script>
pages.json页面配置
//#ifdef APP-PLUS
//启动页
{
"path": "pages/guide/judge",
"style": {
"enablePullDownRefresh": false,
"onReachBottomDistance": 100,
"navigationStyle": "custom",
"app-plus": {
"contentAdjust": false,
"bounce": "none"
}
}
},
{
"path": "pages/guide/guide",
"style": {
"enablePullDownRefresh": false,
"onReachBottomDistance": 100,
"navigationStyle": "custom",
"app-plus": {
"contentAdjust": false,
"bounce": "none"
}
}
},
// #endif
