首页效果以及实现步骤
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e737f27e1a7334c8566832572cc25f0d.png)
获取轮播图数据
data: {
swiperList:[]
},
getSwiperList(){
wx.request({
url:'https://www.escook.cn/slides',
method:'GET',
success:(res)=>{
console.log(res)
this.setData({
swiperList:res.data
})
}
})
},
轮播图效果
<!-- 轮播图区域 -->
<swiper indicator-dots circular>
<swiper-item wx:for="{{swiperList}}" wx:key="id">
<image src="{{item.image}}"></image>
</swiper-item>
</swiper>
swiper{
height: 350rpx;
}
swiper image{
width: 100%;
height: 100%;
}
接口地址
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/de73b31b719571ae9b3d424cd7b3a173.png)
swiper{
height: 350rpx;
}
swiper image{
width: 100%;
height: 100%;
}
.grid-list{
display: flex;
flex-wrap: wrap;
border-left: 1rpx solid #efefef;
border-top: 1rpx solid #efefef;
}
.grid-item{
width: 33.33%;
height: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-right: 1rpx solid #efefef;
border-bottom: 1rpx solid #efefef;
box-sizing: border-box;
}
.grid-item image{
width: 60rpx;
height: 60rpx;
}
.grid-item text{
font-size: 24rpx;
margin-top: 10rpx;
}
.img-box{
display: flex;
padding: 20rpx 10rpx;
justify-content: space-around;
}
.img-box image{
width: 45%;
}
<!--pages/home/home.wxml-->
<!-- 轮播图区域 -->
<swiper indicator-dots circular>
<swiper-item wx:for="{{swiperList}}" wx:key="id">
<image src="{{item.image}}"></image>
</swiper-item>
</swiper>
<!-- 九宫格区域 -->
<view class="grid-list">
<view class="grid-item" wx:for="{{gridList}}" wx:key="id">
<image src="{{item.icon}}"></image>
<text>{{item.name}}</text>
</view>
</view>
<!-- 图片区域 -->
<!-- widthFix宽度不变高度自适应 -->
<view class="img-box">
<image src="/images/2.jpg" mode="widthFix"></image>
<image src="/images/1.jpg" mode="widthFix"></image>
</view>
Page({
data: {
swiperList:[],
gridList:[]
},
onLoad(options) {
this.getSwiperList()
this.getGridList()
},
getSwiperList(){
wx.request({
url:'https://www.escook.cn/slides',
method:'GET',
success:(res)=>{
console.log(res)
this.setData({
swiperList:res.data
})
}
})
},
getGridList(){
wx.request({
url:'https://www.escook.cn/categories',
method:'GET',
success:(res) => {
console.log(res)
this.setData({
gridList:res.data
})
}
})
},
onReady() {
},
onShow() {
},
onHide() {
},
onUnload() {
},
onPullDownRefresh() {
},
onReachBottom() {
},
onShareAppMessage() {
}
})
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5316bbaa3fe1089d31858741eb6379c6.png)