搭建资源服务器
- 全局安装serve：
npm install -g serve - 在任何你想的地方新建文件夹：
resources。resources下新建文件夹：images，用于存放静态图片资源。 - 启动服务器：
serve resources。
小程序项目
代码涉及的文件有：
- index.html
- index.wxss
- index.js
index.html
<view class="swiper-container">
<swiper style="height:{
{
swiperH}}" class="swiper" bindchange="handleChange" autoplay circular duration="1500" bindtransition="handleTransition" bindanimationfinish="handleAnimationFinish">
<swiper-item wx:for="{
{imgList}}" wx:key="id" class="swiper-item">
<view class="box">
<image src="{
{item.url}}" bindload="getHeight" style="height:{
{
swiperH}}" class="img {
{index===curIndex?'image-use-animate':'image-unuse-animate'}}"></image>
<view class="box-title {
{index===curIndex?'title-use-animate':'title-unuse-animate'}}">{
{item.title}}</view>
</view>
</swiper-item>
</swiper>
</view>
index.wxss
page{
height: 100%;
width: 100%;
padding: 0 10rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.swiper-container{
width: 100%;
border-radius: 10rpx;
overflow: hidden;
}
.swiper-item .img{
width: 100%;
transform-style: preserve-3d;
transform: translateZ(0);
}
.image-use-animate{
animation: depthOfFocus 3s 1s ease-in-out both;
}
.image-unuse-animate{
animation: none;
}
.box{
width: 100%;
height: 100%;
perspective: 300rpx;
overflow: hidden;
}
.box-title{
position: absolute;
left: 0;
right: 0;
font-size: 36rpx;
text-align: center;
color: #fff;
}
.title-use-animate{
animation: bounceInUp .5s linear .5s both;
}
.title-unuse-animate{
animation: none;
}
@keyframes depthOfFocus{
100% {
transform: translateZ(60rpx);
}
}
@keyframes bounceInUp{
to{
bottom: 10rpx;
}
from{
bottom: -50rpx;
}
}
index.js
const host = "http://localhost:3000"
Page({
data:{
swiperH:0,
imgList:[
{
id:"001",url:host+'/images/1.jpg',title:"公司简介"},
{
id:"002",url:host+'/images/2.jpg',title:"愿景及使命"},
{
id:"003",url:host+'/images/3.jpg',title:"发展历程"},
{
id:"004",url:host+'/images/4.jpg',title:"业务架构"},
{
id:"005",url:host+'/images/5.jpg',title:"管理团队"}
],
curIndex:0
},
getHeight:function(e){
var winWid = wx.getSystemInfoSync().windowWidth;//获取当前屏幕的宽度
var imgh = e.detail.height;//图片高度
var imgw = e.detail.width;
var sH = winWid * imgh / imgw + "px"
this.setData({
swiperH: sH//设置高度
})
},
handleChange(event){
//轮播开始
this.setData({
curIndex:event.detail.current});
},
handleTransition(event){
//轮播过程
// console.log("enter transition",event);
},
handleAnimationFinish(event){
//轮播结束
// console.log("enter animation finish",event);
}
})