效果图

xiaoguotu

源代码 素材地址

微信开发者代码管理平台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接口能请求 记得勾选 测试专用

测试专用

posted on   depressiom  阅读(236)  评论(0编辑  收藏  举报
努力加载评论中...

点击右上角即可分享
微信分享提示