微信小程序开发学习（第三章）-本地生活页面实现

目录

1、本地生活实现效果

2、案例实现步骤

home.js 文件

home.json 文件

home.wxml 文件

home.wxss 文件

---

1、本地生活实现效果

 

2、案例实现步骤

声明：项目中需要的图片资源自己去网上找推荐网站：iconfont-阿里巴巴矢量图标库

a、创建项目并梳理结果，设置标题信息等等，在 app.json 中设置

   "window":{
     "backgroundTextStyle":"light",
     "navigationBarBackgroundColor": "#2b4b6b",
     "navigationBarTitleText": "本地生活",
     "navigationBarTextStyle":"white"
   },

b、配置tabBar效果，在 app.json 和 window 平级创建 tabBar 。

 "tabBar": {
     "list": [{
       "pagePath": "pages/home/home",
       "text": "首页",
       "iconPath": "image/tab/home.png",
       "selectedIconPath": "image/tab/home-active.png"
     },{
       "pagePath": "pages/message/message",
       "text": "消息",
       "iconPath": "image/tab/message.png",
       "selectedIconPath": "image/tab/message white.png"
     },{
       "pagePath": "pages/contact/contact",
       "text": "帮助",
       "iconPath": "image/tab/contact.png",
       "selectedIconPath": "image/tab/contact-active.png"
     }]
   },

页面实现效果，在 app.json 中的 pages 属性中创建三个页面

  "pages":[
     "pages/home/home",
     "pages/message/message",
     "pages/contact/contact"
   ],

在本案例中，只有 home 界面有内容，message 和 contact 是空页面，这里值提供home页面的代码。

home.js 文件

 // pages/home/home.js
 Page({
 ​
   /**
    * 页面的初始数据
    */
   data: {
     //轮播图的数据
     swiperList: [],
     //九宫格数据
     girdList:[]
   },
 ​
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
     this.getSwiperList();
   },
   //获取轮播图的数据
   getSwiperList() {
     // wx.request({
     //   //目前这个地址不能用了
     //   url: 'https://www.escook.cn/slides',
     //   method:'GET',
     //   success:(res) =>{
     //     console.log(res);
     //   }
     // });
     //使用本地的数据
     var images = [{
       id: 1,
       name: "/image/健康和运动.jpg"
     }, {
       id: 2,
       name: "/image/向日葵1.jpg"
     }, {
       id: 1,
       name: "/image/本地生活1.jpg"
     }];
 ​
     var tabs = [{
       id: 1,
       img: "/image/tab/人工智能.png",
       name: "人工智能"
     }, {
       id: 2,
       img: "/image/tab/助手.png",
       name: "助手"
     }, {
       id: 3,
       img: "/image/tab/定额管理.png",
       name: "助手"
     }, {
       id: 4,
       img: "/image/tab/打印预览.png",
       name: "打印预览"
     }, {
       id: 5,
       img: "/image/tab/扫描.png",
       name: "扫描"
     }, {
       id: 6,
       img: "/image/tab/组织.png",
       name: "组织"
     }, {
       id: 7,
       img: "/image/tab/群众.png",
       name: "群众"
     }, {
       id: 8,
       img: "/image/tab/老人、残疾.png",
       name: "老人、残疾"
     }, {
       id: 9,
       img: "/image/tab/人工智能.png",
       name:"人工智能"
     }, ]
     this.setData({
       swiperList: images,
       girdList:tabs
     })
   },
 ​
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady() {
 ​
   },
 ​
   /**
    * 生命周期函数--监听页面显示
    */
   onShow() {
 ​
   },
 ​
   /**
    * 生命周期函数--监听页面隐藏
    */
   onHide() {
 ​
   },
 ​
   /**
    * 生命周期函数--监听页面卸载
    */
   onUnload() {
 ​
   },
 ​
   /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
   onPullDownRefresh() {
 ​
   },
 ​
   /**
    * 页面上拉触底事件的处理函数
    */
   onReachBottom() {
 ​
   },
 ​
   /**
    * 用户点击右上角分享
    */
   onShareAppMessage() {
 ​
   }
 })

home.json 文件

 {
   "usingComponents": {}
 }

home.wxml 文件

 <!--pages/home/home.wxml-->
 ​
 <!-- 轮播图区域 -->
 <swiper indicator-dots circular>
   <swiper-item wx:for="{{swiperList}}" wx:key="id">
     <image src="{{item.name}}"></image>
   </swiper-item>
 ​
 </swiper>
 ​
 <!-- 九宫格区域 -->
 ​
 <view class="grid-list">
   <view class="grid-item" wx:for="{{girdList}}" wx:key="id">
     <image src="{{item.img}}" />
     <text>{{item.name}}</text>
   </view>
   <text></text>
 </view>
 ​
 ​
 <!-- 图片区域 -->
 <view class="img-box">
   <image src="/image/link-01.png" mode="widthFix" />
   <image src="/image/link-02.png" mode="widthFix" />
 </view>
 ​

home.wxss 文件

/* pages/home/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.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 20rpx;
   justify-content: space-around;
 }
 ​
 .img-box image{
   width: 45%;
   height:45%;
 }