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;
    }
     
     
     
     
  • 相关阅读:
    HTTP断点续传 规格严格
    Java Shutdown 规格严格
    linux 命令源码 规格严格
    JTable调整列宽 规格严格
    linux 多CPU 规格严格
    Hello can not find git path 规格严格
    Kill 规格严格
    拜拜牛人 规格严格
    Swing 规格严格
    Debugging hangs in JVM (on AIX but methodology applicable to other platforms) 规格严格
  • 原文地址:https://www.cnblogs.com/geekjsp/p/9724612.html
Copyright © 2011-2022 走看看