网易云音乐的banner图样式,其基本代码程序都可以找到,但碰到样式中的问题,预实现的样式如下:
其要实现的为轮播图+背景颜色(自己可以更改为图片等)(轮播图由右边框进入,左边框消失)
轮播图所用视图容器为swiper,具体见官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
其代码如下:
WXML:(图片地址可自己替换)
<view class="tab-list-movie" style="background: rgb(160, 57, 57);"> //rgb为背景颜色
//banner效果图
<swiper class="banners" indicator-dots="true" indicator-color="ivory" indicator-active-
color="#d43c33" autoplay="true" interval="800" circular="true" >
<swiper-item class="swiper-item" >
<image src="/static/images/23400b01f80cc28fafa0ffc452d1e0e1.jpeg"></image>
</swiper-item>
<swiper-item class="swiper-item" >
<image src="/static/images/41d8552cc475cd6a845c84d6a76ea333.jpeg" ></image>
</swiper-item>
<swiper-item class="swiper-item" >
<image src="/static/images/5138fb34d339f7b83d3db1a47ff25211.jpeg" ></image>
</swiper-item>
</swiper>
</view>
WXSS:
.tab-list-movie{
height: 400rpx;
}
.banners {
padding-top: 50rpx;
}
.swiper-item{
display: flex;
justify-content: center;
height: 100%;
align-items: center;
}
.banners image {
height: 100%;
width: 650rpx;
border-radius: 20rpx;
justify-content: center;
align-items:center;
}
ps:接口api需要js,wxml也需要替换部分
需要调用网易云banner接口代码如下:
WXML:
<!-- 轮播图区域 -->
<view class="tab-list-movie" style="background: rgb(255, 255, 255);">
<swiper class="banners" indicator-dots="true" indicator-color="ivory" indicator-
active-color="#d43c33" autoplay="true" interval="2500" circular="true" >
<swiper-item class="swiper-item" wx:for="{{bannerList}}" wx:key="bannerId">
<image src="{{item.pic}}" ></image>
</swiper-item>
</swiper>
</view>
WXSS:(如上)
JS:
import request from '../../utils/request'
Page({
data: {
bannerList:[],//轮播图数据,初始化
},
onLoad: async function (options) {
//获取轮播图数据
let bannerListData = await request('/banner', {type: 2});
this.setData({
bannerList: bannerListData.banners
})
},
})
需创建utils里两个文件夹config.js(配置服务器相关信息)和request.js(发送ajax请求)
config.js
export default{
host: 'http://localhost:3000',
mobilehost: 'http://jp84w8.natappfree.cc'
}
request.js
import config from './config'
export default (url, data={}, method='GET') => {
return new Promise((resolve, reject) => {
wx.request({
url: config.mobilehost + url ,
data,
method,
success: (res) => {
console.log('请求成功', res);
resolve(res.data);
},
fail: (err) => {
console.log('请求失败', err);
reject(err);
}
})
})
}