题外话:
我做的是一个仿网易云音乐小程序的主页背景与轮播图同时变化,想法来源于昨天无意间看到了益禾堂点单小程序的主界面使用了类似的设计,让我觉得挺新颖的,于是也想试一下,哈哈。
益禾堂小程序界面: 我做的网易云主题界面:
实现过程:
wxml文件:
<view class="bgmovie">
<image mode="widthFix" src="{{backgroundArr[swiperIndex].imageUrl}}"/>
</view>
<swiper autoplay interval="3000" indicator-dots circular indicator-active-color="red" bindchange="getSwiperIndex">
<block wx:for="{{backgroundArr}}" wx:key="*this" >
<swiper-item>
<image src="{{item.imageUrl}}"></image>
</swiper-item>
</block>
</swiper>
wxss文件:
/* 背景随轮播图而改变 */
.bgmovie {
height: 100vh;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
display: flex;
justify-content: center;
align-items: center;
}
/*背景图片*/
.bgmovie image {
width: 100%;
height: 100%;
transform: scale(5);
filter:blur(30rpx);
}
/*轮播图*/
swiper{
width: 100%;
height: 300rpx;
}
swiper swiper-item {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
swiper-item image {
display: block;
width: 650rpx;
height: 100%;
border-radius: 20rpx;
justify-content: center;
align-items: center;
}
js文件:
Page({
/* 页面的初始数据*/
data: {
// 获取背景轮播图
backgroundArr:[],
// 获取轮播图索引值
swiperIndex:0,
},
/* 背景随轮播图而改变 */
getSwiperIndex(e) {
// console.log(e);
let currentIndex = e.detail.current;
this.setData({
swiperIndex:currentIndex
})
},
// 获取轮播图数据
async getBannerData() {
let res = await getBanner();
let backgroundArr = [];
await res.data.banners.forEach(async(items) => {
backgroundArr.push(items);
this.setData({
backgroundArr
})
})
},