效果图
源代码 素材地址
微信开发者代码管理平台https://git.weixin.qq.com/depressiom/my_mp
进行整体 app.json 设置
{
"pages":[ //页面路径 tarbar页面在最前面
"pages/home/home",
"pages/contact/contact",
"pages/message/message"
],
"window":{
"backgroundTextStyle":"dark", // 下拉刷新样式
"navigationBarBackgroundColor": "#2b4b6b", //设置背景颜色 十六进制
"navigationBarTitleText": "本地生活", // 设置头部导航栏名称
"navigationBarTextStyle":"white", //导航栏字体颜色
"enablePullDownRefresh":true , //下拉刷新
"backgroundColor": "#333333", // 下拉刷新的背景颜色 十六进制
"onReachBottomDistance": 50 //上拉加载
},
"tabBar": { //tabar 设置
"list": [{
"pagePath": "pages/home/home", //页面路径
"text": "首页", // 名称
"iconPath": "/images/tabs/home.png", //未选中时的图片地址
"selectedIconPath": "/images/tabs/home-active.png" //选中时的图片地址
},{
"pagePath": "pages/contact/contact",
"text": "联系人",
"iconPath": "/images/tabs/contact.png",
"selectedIconPath": "/images/tabs/contact-active.png"
},{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/images/tabs/message.png",
"selectedIconPath": "/images/tabs/message-active.png"
}]
},
"style": "v2", // 样式版本 v2为最新版本
"sitemapLocation": "sitemap.json"
}
数据获取 home.js
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
// 存轮播图数据
swiperList:[],
// 存放九宫格数据
gridList:[]
},
/**
* 获取轮播图数据的方法
*/
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
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getSwiperList();
this.getGridList();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
页面布局 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>
<!-- 图片布局 -->
<view class="image-box">
<image src="/images/link-01.png" mode="widthFix"></image>
<image src="/images/link-02.png" mode="widthFix"></image>
</view>
css 样式美化 home.wxss
/* 轮播图 */
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.3%;
height: 200rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-right: 1rpx solid #efefef;
border-bottom: 1rpx solid #efefef;
box-sizing: border-box; /* 默认content-box 可与之比较差异 */
}
.grid-item image{
width: 60rpx;
height: 60rpx;
}
.grid-item text{
margin-top: 10rpx;
font-size: 24rpx;
}
/** 图片区域 */
.image-box{
display: flex;
padding: 20rpx 10rpx;
justify-content: space-around;
}
.image-box image{
width: 45%;
}
要想url接口能请求 记得勾选 测试专用
本文来自博客园,作者:depressiom,转载请注明原文链接:https://www.cnblogs.com/depressiom/p/16198210.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步