[toc]

功能开发,需求先行

本次功能实现首页轮播图功能。
image.png

1、编写轮播图静态页面

pages/index/index.wxml

<view>
  <search-input></search-input>

  <view class="index_swiper">
    <swiper autoplay="true" indicator-dots="true" circular="true">
    <swiper-item 
    wx:for="{{swiperList}}" wx:key="goods_id"
    >
    <navigator>
      <image mode="widthFix" src="{{item.image_src}}"></image>
    </navigator>
  </swiper-item>
  </swiper>
  </view>
</view>

2、定义静态样式

pages/index/index.wxss

.index_swiper swiper {
  width: 750rpx;
  height: 340rpx;
}
.index_swiper swiper image {
  width: 100%;
}

3、获取动态数据

写静态页面时,发现需要动态数据,那么去定义数据变量和给变量赋值
pages/index/index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    swiperList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
      success:(result) => {
        this.setData({
          swiperList:result.data.message
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

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

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

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

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

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

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

image.png
image.png

Q.E.D.


只有创造,才是真正的享受,只有拚搏,才是充实的生活。