1---home.wxml 区域 (页面整体的标签)
<!-- 轮播图区域 -->
<swiper indicator-dots circular autoplay>
<swiper-item wx:for="{{SwiperArr}}" wx:key="id">
<image src="{{item.image}}"></image>
</swiper-item>
</swiper>
<!-- 九宫格区域 -->
<view class="grid-Arr">
<view class="grid-item" wx:for="{{GridArr}}" wx:key="id">
<image src = "{{item.icon}}"></image>
<text>{{item.name}}</text>
</view>
</view>
<!-- 图片区域 -->
<view class="imgBox">
<image src="/images/link-01.png" mode="widthFix"></image>
<image src="/images/link-02.png" mode="widthFix"></image>
</view>
2---app.json区域 (全局配置文件){
"pages": [
"pages/home/home",
"pages/message/message",
"pages/contact/contact"
],
"window": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "本地生活",
"navigationBarBackgroundColor": "#2b4b6b"
},
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/images/首页-置灰.png",
"selectedIconPath": "/images/1_导航-默认 .png"
},{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/images/消息-置灰.png",
"selectedIconPath": "/images/即时聊天.png"
},{
"pagePath": "pages/contact/contact",
"text": "联系人",
"iconPath": "/images/填选购人.png",
"selectedIconPath": "/images/1_用户管理.png"
}]
},
"style": "v2",
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}
3-home.js 区域 (存放home页面的数据)Page({
/**
* 页面的初始数据
*/
data: {
//轮播图数组SwiperArr : [],
//九宫格 数组GridArr : [],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getSwiperArr()
this.getGridArr()
},
//获取轮播图数据
getSwiperArr(){
wx.request({
// https://applet-base-api-t.itheima.net/slides
url: 'https://applet-base-api-t.itheima.net/slides',
method :'GET',
success: (res) => {
this.setData({
SwiperArr: res.data
})
}
})
},
// 获取九宫格数据
getGridArr(){
wx.request({
url: 'https://applet-base-api-t.itheima.net/categories',
method : "GET",
success : (res) => {
this.setData({
GridArr :res.data
})
}
})
},
4--home.wxss ( home页面的渲染)/* 轮播图区域start*/
swiper{
height: 350rpx;
}
swiper image {
width: 100%;
height: 100%;
}
/* 轮播图区域end */
/*九宫格区域start*/
.grid-Arr{
display: flex;
flex-wrap: wrap; /*换行*/
}
.grid-item{
width: 33.33%;
height: 200rpx;
display: flex;
flex-direction: column;/*主轴纵向*/
/*居中*/
align-items: center;
justify-content: center;
border-bottom: 1px solid #ededde;
border-right: 1px solid #ededde;
box-sizing: border-box;
}
.grid-item image{
width: 60rpx;
height: 60rpx ;
}
.grid-item text{
font-size: 24rpx;
margin-top: 10rpx;
color: gray;
}
/*九宫格区域end*/
/*图片区域start*/
.imgBox{
display: flex;
justify-content: space-around;
padding-top: 20rpx;
}
.imgBox image{
width: 45%;
height: 200rpx;
}
/* 图片区域 end*/
5--效果展示
开发微信小程序 案例01-本地生活首页页面
迷雾yx2024-10-01 15:07
相关推荐
中云DDoS CC防护蔡蔡4 小时前
微信小程序被攻击怎么选择高防产品井眼8 小时前
微信小程序-prettier 格式化qq_174482857510 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现wqq_99225027710 小时前
springboot基于微信小程序的食堂预约点餐系统licy__16 小时前
微信小程序登录注册页面设计(小程序项目)2301_7752811921 小时前
法语旅游常用口语-柯桥学外语到蓝天广场泓畅学校Hotchip华芯邦科技1 天前
MEMS硅麦克风应用电子烟雾化产业稳步爬升,耐高温、 防油、防酸、防腐蚀等性能优势和可实现自动化贴片及极高的一致性等特性使其必将成为主流wqq_9922502771 天前
springboot基于微信小程序的农产品交易平台guanpinkeji2 天前
二手手机回收小程序,一键便捷高效回收尘浮生2 天前
Java项目实战II基于微信小程序的私家车位共享系统(开发文档+数据库+源码)