首页 > 小程序教程 > 微信小程序无限加载列表页Demo样式模板制作设计下载

微信小程序无限加载列表页Demo样式模板制作设计下载

上一篇 下一篇
制作好以后效果图如下:
一、wxml页面代码如下:
<view class="container">
    <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" 
        class="list" bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh">
        <view class="item" wx:for="{{list}}">
            <image class="img" src="{{item.pic_url}}"></image>
            <view class="text">
                <text class="title">{{item.name}}</text>
                <text class="description">{{item.short_description}}</text>
            </view>
        </view>
    </scroll-view>
    <view class="body-view">
        <loading hidden="{{hidden}}" bindchange="loadingChange">
            加载中...
        </loading>
    </view>
</view>
 
二、wxss样式文件代码如下:
.container{
    height: 100%;
    padding: 20rpx;
}

.item{
    display: flex;
    margin-bottom: 30rpx;
}

.img{
    height: 200rpx;
    flex-grow : 1;
    flex-shrink:0;
    width: 300rpx;
}

.text{
    display: flex;
    flex-shrink:1;
    flex-grow:1;
    padding: 10rpx;
    flex-wrap: wrap;
}

.title{
    font-size: 20rpx;
}
.description{
    font-size: 15rpx;
    align-self:flex-end;
}
三、js页面代码如下:
var url = "http://www.imooc.com/course/ajaxlist";
var page =0;
var page_size = 20;
var sort = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;

var GetList = function(that){
    that.setData({
        hidden:false
    });
    wx.request({
        url:url,
        data:{
            page : page,
            page_size : page_size,
            sort : sort,
            is_easy : is_easy,
            lange_id : lange_id,
            pos_id : pos_id,
            unlearn : unlearn
        },
        success:function(res){
            //console.info(that.data.list);
            var list = that.data.list;
            for(var i = 0; i < res.data.list.length; i++){
                list.push(res.data.list[i]);
            }
            that.setData({
                list : list
            });
            page ++;
            that.setData({
                hidden:true
            });
        }
    });
}
Page({
  data:{
    hidden:true,
    list:[],
    scrollTop : 0,
    scrollHeight:0
  },
  onLoad:function(){
      var that = this;
      wx.getSystemInfo({
          success:function(res){
              console.info(res.windowHeight);
              that.setData({
                  scrollHeight:res.windowHeight
              });
          }
      });
  },
  onShow:function(){
    var that = this;
    GetList(that);
  },
  bindDownLoad:function(){
      var that = this;
      GetList(that);
  },
  scroll:function(event){
     this.setData({
         scrollTop : event.detail.scrollTop
     });
  },
  refresh:function(event){
      page = 0;
      this.setData({
          list : [],
          scrollTop : 0
      });
      GetList(this)
  }
})

模板简介:该模板名称为【微信小程序无限加载列表页Demo样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 24,859次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-20
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信素材 微信文章 微信模板 微信公众平台 微信图片 企业网站 单页式简历模板 自适应 响应式 html5
您可能会喜欢的其他模板