首页Swiper轮播图ajax异步请求数据动态渲染实现

最新推荐文章于 2024-04-21 12:09:24 发布

九品印相

最新推荐文章于 2024-04-21 12:09:24 发布

阅读量156

点赞数 1

分类专栏：分布式小程序电商2 文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/m0_68935893/article/details/135881476

版权

分布式小程序电商2 专栏收录该内容

78 篇文章 1 订阅

订阅专栏

<view>
<!-- 搜索框开始 -->
    <SearchBar></SearchBar>
<!-- 搜索框结束 -->

<!-- 轮播图开始 -->
<view class="index_swiper">
    <swiper autoplay circular indicator-dots>
        <swiper-item 
            wx:for="{{swiperList}}"
            wx:for-item="swiper"
            wx:key="id"
            >
            <navigator>
                <image mode="widthFix" src="{{'http://localhost:8080/image/swiper/'+swiper.swiperPic}}"></image>
            </navigator>
        </swiper-item>
    </swiper>
</view>
<!-- 轮播图结束 -->
</view>

.index_swiper{
    swiper{
        width: 750rpx;
        height: 375rpx;
        swiper-item{
            image{
                width: 100%;
            }
        }
    }
}

{
  "usingComponents": {
      "SearchBar":"/components/SearchBar/SearchBar"
  },
  "navigationBarTitleText": "Java1234商城-首页"
}

Page({

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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //发送异步请求，获取后端数据
    wx.request({
      url: 'http://localhost:8080/product/findSwiper',
      method:"GET",
      success:(result)=>{
          console.log(result)
          this.setData({
              swiperList:result.data.message
          })
      }
    })
  },

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

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

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

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

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

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

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