微信小程序显示列表数据

目录

微信小程序创建项目配置底部导航栏
微信小程序滚动播放内容
微信小程序功能中心模块开发
微信小程序个人中心页面开发
微信小程序获取电话号码
微信小程序显示列表数据
微信小程序显示分页列表
微信小程序添加插屏广告
微信小程序添加激励式广告

最终效果可扫码查看

遇到问题可通过公众号留言反馈

概述

列表数据分为两篇，本篇为基本数据列表展示，下一篇为分页列表展示，即加载更多效果。
本篇最终展示样式

技术总结

1. 等待效果wx.showLoading
2. 取消等待效果wx.hideLoading()
3. 列表展示，view的wx:for="{{list}}"

样式

偷懒直接使用了之前导入的样式

@import "../index/weui.wxss";

流程

测试数据接口地址为http://yr.lootaa.com/time/channel/common?billNo=177WPPPPXMNN3965，其中177WPPPPXMNN3965为需要替换的请求参数。

// pages/ship/ship.js
Page({

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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  formSubmit(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
    var billNo = e.detail.value.billNo;
    if(billNo) {
      var url = 'http://yr.lootaa.com/time/channel/common?billNo=' + billNo;
      var that = this;
      wx.showLoading({
        title: '网页版更快速',
      })
      wx.request({
        url: url,
        timeout: 60000,
        success (res) {
          wx.hideLoading();
          console.log(res.data.data)
          that.setData({
            list: res.data.data.times
          }) 
        },
        fail: function (res) {
          wx.hideLoading()
        }
  
      })
    }
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

布局

<view class="container">
  <view class="page-body">
    <form catchsubmit="formSubmit">
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
          <input name="billNo" class="weui-input" auto-focus placeholder="请输入提单号" />
        </view>
      </view>
      <text style="font-size: 12px; margin-left: 10px;">快速版：PC端访问 http://www.lootaa.com/ccxx.html</text>
      <button type="primary" formType="submit" style="width:100%;margin-top: 10px;">查询出场时间</button>
    </form>

    <view style="margin-top:10px; padding:10px; background:#eeeeee;" wx:for="{{list}}" wx:key="key">
      <view>
        <text style="font-size: 14px;"> 提单号： {{item.billNo}}</text>
      </view>
      <view>
        <text style="font-size: 14px;"> 箱号： {{item.boxNo}}</text>
      </view>
      <view>
        <text style="font-size: 14px;"> 出场时间： {{item.time}}</text>
      </view>

    </view>
  </view>
</view>