开发微信小程序 案例01-本地生活首页页面

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--效果展示

相关推荐
666HZ66612 小时前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss
牧杉-惊蛰14 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
十一08299317 小时前
【PDF-XSS攻击】springboot项目-上传文件-解决PDF文件XSS攻击
spring boot·pdf·xss
壹立科技17 小时前
指尖校园:自营外卖系统重塑高校生活便捷度
生活·外卖跑腿app·校园外卖·校园外卖小程序
拼图20919 小时前
微信小程序——skyline版本问题
微信小程序·小程序
zskj_zhyl19 小时前
科技有温度:七彩喜智慧康养平台,为银发生活织就“数字守护网”
人工智能·科技·生活
mg66820 小时前
微信小程序入门实例_____打造你的专属单词速记小程序
微信小程序·小程序
【ql君】qlexcel20 小时前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
程序员陆通20 小时前
Vibe Coding开发微信小程序实战案例
微信小程序·小程序·notepad++·ai编程
nbsaas-boot21 小时前
[特殊字符] 分享裂变新姿势:用 UniApp + Vue3 玩转小程序页面分享跳转!
小程序·uniapp·notepad++