效果图

image.png

对应信息分别为 行号、股票代码、名称、关注、关注人数。

以下代码同时实现了下拉刷新，触底加载更多功能；关注还没有实现。

5217.wxml

<!-- 白龙马5217列表 -->
<view class="items" wx:for="{{gupiao}}" wx:key="{{index}}" >
  <view class="hanghao" bindtap="tapguanzu" id="{{index}}" data-value="{{item.gzu}}">
    <text class="hanghaot">{{index+1}}</text>    
  </view>
 <view class="gupiao">
  <text>{{item.code}}-{{item.name}}</text>    
  </view>
  <view class="dian">
>   <text data-gzu="{{index}}" catchtap="xingTap" class="xing">{{gzu}}</text>
   <text class="count">5217</text>
  </view>
</view>

5217.wxss

/* pages/blma/blma.wxss */
page {
  background: #fff;
}

.items {
  display: flex;
  flex-direction: row;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.hanghao {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110rpx;
  height: 110rpx;
}
.hanghaot{
  background: #e22;
  width: 57rpx;
  height: 57rpx;
  border-radius: 20%;
  font-size: 44rpx;
  color:#fee;
  text-align: center;
  padding: 25rpx
}

.gupiao {
  display: flex;
  height: 60rpx;
  width:470rpx;
  background: #fff;
  padding: 25rpx;
  border-bottom:1rpx solid #405f80;
  color:#c22;
  font-size: 40rpx;
}

.dian {
  display: flex;
  flex-direction: column;
  width: 110rpx;
  height: 100rpx;
  background: #fff;
  padding: 5rpx;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-bottom:1rpx solid #405f80;
}

.xing {
  color: #c22;
  font-size: 60rpx;
}

.count {
  font-size: 25rpx;
  color: #555;
  padding: 2rpx;
}

5217.json

{
  "navigationBarTitleText": "5217", //页面名称
  "enablePullDownRefresh": true, //允许下拉刷新
  "onReachBottomDistance":100, //触底加载距离
  "usingComponents": {}
}

简单解释解释一下：注释是此文档加上去的，实际文档不能加任何注释。

5217.js

// pages/5217/5217.js
const db = wx.cloud.database();
Page({
  
  /**
   * 页面的初始数据
   */
  data: {
    gupiao: [{
      code: "052170",
      name: "白龙马",
      gzu: "☆"
    }],
    gzu: "☆",

    rowCount:0
    
    //openid: 'oWJ374kyhDYYtpfmGpwPV1bk9ntc',
  },

  onQuery: function () {
    let rowCount = this.data.rowCount;
    // 查询当前用户所有的 blma5217
    db.collection('blma5217').where({}).orderBy('code','asc').skip(rowCount).get({
      success: res => {
        console.log(res)
        let new_data = res.data;
        let old_data = this.data.gupiao;
        rowCount = this.data.rowCount + 20;
        this.setData({
          //gupiao: JSON.stringify(res.data, null, 2)
         gupiao: old_data.concat(new_data),     
          rowCount:rowCount,  
        })
        console.log('[数据库] [查询记录] 成功: ', res)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查询记录失败'
        })
        console.error('[数据库] [查询记录] 失败：', err)
      }
    })
  },

  xingTap(e) {
    //点☆关注
    console.log(e.target.dataset.gzu);
    let gz = this.gzu;
    if (gz == "☆") gz = "★"
    else gz = "☆"
    this.setData({
      gzu:gz,
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //页面创建完成查询数据
    this.setData({
      rowCount:0,
    });
    
   this.onQuery();  
 },

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

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

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    //下拉刷新，查询数据
    this.setData({
      gupiao:[],
      rowCount:0,
    });
    
    this.onQuery();  
    wx.stopPullDownRefresh();
  },

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    title:"白龙马5217指数"
  }
})