模拟加载更多

最新推荐文章于 2022-01-26 15:25:32 发布

我是高手高手高高手

最新推荐文章于 2022-01-26 15:25:32 发布

阅读量528

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/haibo0668/article/details/80674981

版权

小程序专栏收录该内容

16 篇文章 4 订阅

订阅专栏

原理：当拉到屏幕拉到底部，显示加载动态，然后显示出内容，内容是静态内容，不是动态数据

效果：

例子：拉到底部，显示出合作学校

wxml文件:

 
 < 
 view 
 class= 
 'guess-you-like' 
 data-id= 
 "school" 
 wx:if= 
 "{{school}}"> 先隐藏合作学校 

<!-- 正在加载  -->
 <view class="weui-loadmore" hidden="{{isHideLoadMore}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">正在加载</view>
  </view>

<!--合作院校-->
<view class='guess-you-like' data-id="school" wx:if="{{school}}">
  <view class='title'>
    <view class='title-left'>
      <image src='/images/video/video.png'></image>
      <text class='title-text'>合作院校</text>
    </view>
  </view>
  <view class='plate-list'>
    <view class='plate-list-school-left'>
      <image src="/images/school/s1.jpg" class='content-img' ></image>
    </view>
    <view class='plate-list-right'>
      <view>
        <text >中国地质大学</text>
      </view>
      <view class='dengji-num more-ellipsis'>
        <text>中国地质大学（北京）位于北京市海淀区学院路，学校的前身是1952年院系调整时期由北京大学、清华大学、天津大学和唐山铁道学院等院校的地质系（科）合并组建的北京地质学院，是建国初期著名的“八大学院”之一。</text>
      </view>
    </view>
  </view>
  <view class='plate-list'>
    <view class='plate-list-school-left'>
      <image src="/images/school/s2.jpg" class='content-img' ></image>
    </view>
    <view class='plate-list-right'>
      <view>
        <text >北京外国语大学</text>
      </view>
      <view class='dengji-num more-ellipsis'>
        <text>北京外国语大学是教育部直属、国家首批“211工程”建设的全国重点大学之一,是目前我国高等院校中历史悠久、教授语种最多、办学层次齐全的外国语大学。大学目前已基本</text>
      </view>
    </view>
  </view>
  <view class='plate-list'>
    <view class='plate-list-school-left'>
      <image src="/images/school/s3.jpg" class='content-img' ></image>
    </view>
    <view class='plate-list-right'>
      <view>
        <text >南开大学</text>
      </view>
      <view class='dengji-num more-ellipsis'>
        <text>南开大学由中华人民共和国教育部直属，位列国家“双一流”、“211工程”和“985工程”，入选首批“2011计划”、“111计划”、“珠峰计划”、“卓越法律人才教育培养计划”、“教育部来华留学示范基地”，被誉为“学府北辰”。</text>
      </view>
    </view>
  </view>
  <view class='plate-list'>
    <view class='plate-list-school-left'>
      <image src="/images/school/s4.jpg" class='content-img' ></image>
    </view>
    <view class='plate-list-right'>
      <view>
        <text >广东外语外贸大学</text>
      </view>
      <view class='dengji-num more-ellipsis'>
        <text>是一所具有鲜明国际化特色的广东省属重点大学。学校入选“2011计划” “教育部来华留学示范基地” “亚洲大学学生交流集体行动计划”（亚洲校园计划），是向联合国提供高端翻译人才的全球19所大学之一、全国国际经济与贸易学科的创始单位之一、国际大学翻译学院联合会成员，是华南地区国际化人才培养和外国语言文化、对外经济贸易、国际战略研究的重要基地。</text>
      </view>
    </view>
  </view>
  <view class='plate-list'>
    <view class='plate-list-school-left'>
      <image src="/images/school/s5.jpg" class='content-img' ></image>
    </view>
    <view class='plate-list-right'>
      <view>
        <text >广东财经大学</text>
      </view>
      <view class='dengji-num more-ellipsis'>
        <text>是一所以法律和商科为教学特色的高等学府，广东省重点建设大学之一，是国家教育部《1+2+1中美人才培养计划》定点高校之一，全国首批卓越法律人才教育培养计划高校，“一带一路”高校战略联盟成员。</text>
      </view>
    </view>
  </view>
  <view class='plate-list'>
    <view class='plate-list-school-left'>
      <image src="/images/school/s6.jpg" class='content-img' ></image>
    </view>
    <view class='plate-list-right'>
      <view>
        <text >深圳大学</text>
      </view>
      <view class='dengji-num more-ellipsis'>
        <text>深圳大学是深圳唯一的一所综合性大学，深圳市唯一一所设立师范教育的大学，也是深圳规模最大的一所本科院校。</text>
      </view>
    </view>
  </view>
  <view class='plate-list'>
    <view class='plate-list-school-left'>
      <image src="/images/school/s7.jpg" class='content-img' ></image>
    </view>
    <view class='plate-list-right'>
      <view>
        <text >暨南大学</text>
      </view>
      <view class='dengji-num more-ellipsis'>
        <text>是国家“211工程”、“985工程优势学科创新平台”重点建设高校，国家“双一流”世界一流学科建设高校，教育部、国侨办、广东省三方签约重点共建大学，教育部全国首批深化创新创业教育改革示范高校；</text>
      </view>
    </view>
  </view>
  <view class='plate-list'>
    <view class='plate-list-school-left'>
      <image src="/images/school/s8.jpg" class='content-img' ></image>
    </view>
    <view class='plate-list-right'>
      <view>
        <text >华南师范大学</text>
      </view>
      <view class='dengji-num more-ellipsis'>
        <text>是广东省人民政府和教育部共建高校，入选国家“双一流”世界一流学科建设高校 [1]  、首批国家“211工程”重点建设大学，入选国家“111计划” [2]  、“卓越教师培养计划”、广东省高水平大学整体建设高校、广东省重点大学、中国政府奖学金来华留学生接收院校，是中国100所首批联入CERNET和INTERNET网的高等院校之一。</text>
      </view>
    </view>
  </view>
</view>

wxss文件：

模拟加载样式

/*  加载更多   */
.weui-loading {
  margin: 0 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  -webkit-animation: weuiLoading 1s steps(12, end) infinite;
  animation: weuiLoading 1s steps(12, end) infinite;
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
  background-size: 100%;
}
.weui-loadmore {
  width: 65%;
  margin: 1.5em auto;
  line-height: 1.6em;
  font-size: 14px;
  text-align: center;
}
.weui-loadmore__tips {
  display: inline-block;
  vertical-align: middle;
}

js文件

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    school: false,
    bannerVideoAttr: {
      "src": "",
      "duration": "178",
      "controls": true,
      "autoplay": false,
      "show-fullscreen-btn": true
    }
  },
  //下拉刷新
  onPullDownRefresh: function () {
    wx.showNavigationBarLoading() //在标题栏中显示加载

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

  },
  //加载更多
  onReachBottom: function () {
    console.log('加载更多')
    setTimeout(() => {
      this.setData({
        isHideLoadMore: true,
        school: true
      })
    }, 1000)
  },