【微信小程序】页面随机生成颜色并实现上拉刷新功能（不使用网页数据请求）

【微信小程序】页面随机生成颜色并实现上拉刷新功能（不使用网页数据请求）

欢迎来到西安培华学院软件协会的博客

你好！ 这是微信小程序页面随机生成颜色并实现上拉刷新功能的代码。如果你想学习如何不使用网页数据请求实现上拉刷新功能, 可以仔细阅读这篇文章。

WXML文件

<view class="box" wx:for="{{ colorString }}" style="background-color: {{ item }};" wx:key="idex"> 
  {{ item }}
</view>

WXSS文件

.box {
    background-color: aqua;
    border-radius: 10px;
    line-height: 200rpx;
    text-align: center;
    margin: 20px;
    /*文本阴影效果*/
    text-shadow: 0rpx 0rpx 5rpx #fff;
    /*盒子阴影效果*/
    box-shadow: 0rpx 0rpx 6rpx #aaa;
  }

JS文件

Page({
    /**
     * 页面的初始数据
     */
    data: {
      //声明十六进制颜色数组
      colorString : new Array(),
  
      //声明颜色数组的行数
      row : 10
    },
    /**
     * 设置随机颜色
     */
    getData() {
        var { row, colorString } = this.data;
        var ColorCharacter = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
      
        for (var i = 0; i < row; i++) {
          var HomeNumber = "#";
      
          for (var j = 0; j < 6; j++) {
            var NumberRand = Math.floor(Math.random() * 16);
            HomeNumber += ColorCharacter[NumberRand];
          }
          colorString.push(HomeNumber); // 追加到colorString末尾
        }
      
        this.setData({
          colorString,
        });
      },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      //加载页面执行设置随机颜色方法
      this.getData()

    },
  
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
  
    },
  
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
  
    },
  
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {
  
    },
  
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
  
    },
  
    /**
     * 页面相关事件处理函数--监听用户下拉动作（实现下拉刷新功能）
     */
    onPullDownRefresh : function() {
    
    },
  
    /**
     * 页面上拉触底事件的处理函数(上拉刷新功能)
     */
    onReachBottom: function () {
        console.log('上拉刷新功能触发了');
        
        var { colorString } = this.data;
        this.getData(); // 追加新的随机颜色数据到colorString末尾
      
        this.setData({
          colorString,
        });
      },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {
  
    }
  })

运行效果: