微信小程序技巧记录

1.直接在app.json中添加pages，会自动按照路径生成page目录文件；

2.动态修改样式：

/**
   * 页面的初始数据
   */
  data: {
    authorInfo: [],
    article: [],
    index: [],
    attentionBackgroundColor: 'white',
    attentionTextColor: 'black'
  },


attentionAction: function() {
    wx.showToast({
      title: '关注成功',
    });
    // 动态设置颜色和背景
    var that = this;
    var bgColor = this.data.attentionBackgroundColor == 'red' ? 'white' : 'red';
    var textColor = this.data.attentionTextColor == 'black' ? 'white' : 'black';
    // 设置背景颜色数据
    this.setData({
      attentionBackgroundColor: bgColor,
      attentionTextColor: textColor
    });
  },

设置样式处：

 <view class='follow' bindtap='attentionAction' style='background-color:{{attentionBackgroundColor}};color: {{attentionTextColor}}'>
          关注
 </view>

3.下拉刷新，上拉加载：

app.json设置enablePullDownRefresh：

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "网易蜗牛读书",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true
  },

当前页设置enablePullDownRefresh为true。

js实现下拉刷新，上拉加载：

 /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    wx.showNavigationBarLoading() //在标题栏中显示加载

    //模拟加载
    setTimeout(function () {
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    }, 1500);
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('加载更多');
    var that = this;
    setTimeout(() => {
      wx.request({
        url: 'https://www.easy-mock.com/mock/5a23a9a2ff38a436c591b6fa/getArticInfo',
        success: function (res) {
          console.log(res.data.data.index);
          console.log(res.data.data.articleInfo);
          that.setData({
            isHideLoadMore: true,
            authors: res.data.data.index,
            id: res.data.data.articleInfo
          })
          wx.hideLoading();
        }
      })
    }, 1000);
  },