微信小程序一个简单的页面小案例

页面效果：

当然，你得先引入图片，需要图片资源的请私信

 app.json里的配置

{
  "pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "本地生活",
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "./images/tabs/home.png",
      "selectedIconPath": "./images/tabs/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "./images/tabs/message.png",
      "selectedIconPath": "./images/tabs/message-active.png"
    },{
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "./images/tabs/contact.png",
      "selectedIconPath": "./images/tabs/contact-active.png"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

home.js

// pages/home/home.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        //存放轮播图数据的列表
        swiperList:[],
        //存放九宫格数据的列表
        gridList:[]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.getSwiperList();
        this.getGridList();
    },

    getSwiperList(){
        wx.request({
          url: 'https://www.escook.cn/slides',
          method:'GET',
          success:(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
                })
            }
          })
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})

home.wxml

<!--pages/home/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="img-box">
    <image src="/images/link-01.png" mode="widthFix"></image>
    <image src="/images/link-02.png" mode="widthFix"></image>
</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.3%; 
    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 10rpx;
    justify-content: space-around;
}

.img-box image{
    width: 45%;
}