微信小程序通过api接口将json数据展现

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yueruitao/article/details/84991529

轮播图

<view>
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" class="banners" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{zhihu}}" wx:key="id">
      <swiper-item class="banner">
        <image src="{{item.images}}" data-id="{{item.b}}" bindtap="bindViewTap" class="banner-image" width="100%" height="100%" />
        <text class="banner-title">{{item.title}}</text>
        <text>{{item.ga_prefix}}</text>
      </swiper-item>
    </block>
  </swiper>
</view>
<view class="type-container">
  <scroll-view class="type-navbar" scroll-x="true">
    <view class="type-box" wx:for-items="{{zhuxin}}" wx:key="id">
      <view id="{{item.id}}" class="type-navbar-item"  bindtap="tabClick">
        {{item.name}}
      </view>
    </view>
  </scroll-view>
</view>
// pages/classroom/classroom.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    duration: 2000,
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    loading: false,
    plain: false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this //不要漏了这句,很重要
    wx.request({
      url: 'http://news-at.zhihu.com/api/4/news/latest',
      headers: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
        //将获取到的json数据,存在名字叫zhihu的这个数组中
        that.setData({
          zhihu: res.data.stories,
          //res代表success函数的事件对,data是固定的,stories是是上面json数据中stories
        })
      }
    }),

      wx.request({
        url: 'http://www.*********.com/mapi_v2/Category/getClassRoomCategories',
        headers: {
          'Content-Type': 'application/json'
        },
        success: function (res) {
          //将获取到的json数据,存在名字叫zhuxin的这个数组中
          that.setData({
            zhuxin: res.data,
          })
        }
      })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

})

猜你喜欢

转载自blog.csdn.net/yueruitao/article/details/84991529