zoukankan      html  css  js  c++  java
  • 微信小程序上拉加载

    index.wxml

     
    <view class="container">
    <scroll-view class='wrap' scroll-y>
    <view class='li'>11</view>
    <view class='li'>11</view>
    <view class='li'>11</view>
    <view class='li'>11</view>
    <view class='li'>11</view>
    <view class='li'>11</view>

    <view class='li'>11</view>

    </scroll-view>
    </view>
     
    index.json
    {
    "component": true,
    "usingComponents": {},
    "onReachBottomDistance":50,
    "enablePullDownRefresh": true,
    "onReachBottomDistance": true
    }
     
     
    index.js
    //index.js
    //获取应用实例
    const app = getApp()

    Page({
    data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
    },
    //事件处理函数
    bindViewTap: function() {
    wx.navigateTo({
    url: '../logs/logs'
    })
    },
    onLoad: function () {
    if (app.globalData.userInfo) {
    this.setData({
    userInfo: app.globalData.userInfo,
    hasUserInfo: true
    })
    } else if (this.data.canIUse){
    // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
    // 所以此处加入 callback 以防止这种情况
    app.userInfoReadyCallback = res => {
    this.setData({
    userInfo: res.userInfo,
    hasUserInfo: true
    })
    }
    } else {
    // 在没有 open-type=getUserInfo 版本的兼容处理
    wx.getUserInfo({
    success: res => {
    app.globalData.userInfo = res.userInfo
    this.setData({
    userInfo: res.userInfo,
    hasUserInfo: true
    })
    }
    })
    }
    },
    getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
    userInfo: e.detail.userInfo,
    hasUserInfo: true
    })
    },
    onReachBottom:function(){
     
    console.log("上拉加载");
    }
    })
     
    index.wxss
    /**index.wxss**/
    .container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    overflow-y: scroll;
     
    }



    .userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    }

    .userinfo-avatar {
    128rpx;
    height: 128rpx;
    margin: 20rpx;
    border-radius: 50%;
    }

    .userinfo-nickname {
    color: #aaa;
    }

    .usermotto {
    margin-top: 200px;
    }
    .container .wrap{
    height: 100%;
    overflow-y: scroll;
    }
    .container .wrap .li{
    height: 240rpx;
    }
     
     
     
     
  • 相关阅读:
    JSONObject对象和JSONArray对象的使用
    toString和getString的区别
    Pytorch 实验中非常有效的代码段
    TeXworks 高效使用指南
    linux 设置新用户
    ICML-21 待读的 Paper
    2019年12月19日记戴老师的讲座
    matplotlib 调整图片的 font size
    IJCAI 投稿 Type-3 字体
    matplotlib 中 figsize 和 dpi 之间的关系
  • 原文地址:https://www.cnblogs.com/geekjsp/p/9724612.html
Copyright © 2011-2022 走看看