zoukankan      html  css  js  c++  java
  • 小程序学习——下拉分页

    小程序出来没几天就被程序员业内判了死刑,但是架不住腾讯的推广

    最近很多朋友都问做过小程序没有,

    今天花了一天时间看了下它的文档,然后做了个基础的分页,可能不是很完善,慢慢的把一些基础功能弄出来做下记录

    <button bindtap="showpro">显示产品</button>
    <view>{{product.Name}}</view>
    
    <view class="content_zero" wx:if="{{picture.length==0}}" >
        <view class="tip color_888888">没有数据</view>
    </view>
    
    <scroll-view scroll-y="true" bindscrolltolower="nextpage"style="height: 200px;" lower-threshold="0px">
        <view wx:for-items="{{picture}}" style="height:50px;line-height:50px;background:#ff0000;margin:10px;"> {{item.AltAttribute}} </view>
    </scroll-view>
    Page({
      onLoad: function (options) {
        var that = this;
        that.showpro();
        that.pictureList(0,5);
      },
      nextpage:function(){
        if (this.data.hasnextpage){
          //显示加载中
          wx.showToast({
            title: '加载中...',
            duration: 100,
            icon: 'loading',
          });
          var newPageIndex = this.data.pageindex + 1;
          this.pictureList(newPageIndex, 5);
        }
        else{
          wx.showToast({
            title: '下面没有数据了',
            icon: 'info',
            duration: 2000
          })
        }
      },
    
      //图片列表 测试分页
      pictureList: function(pageindex,pagesize) {
        var that = this;
        if (pageindex >= 0 ){
          var oldpicture = this.data.picture;
        }else{
          var oldpicture = null;
        }
        console.log(oldpicture);
        wx.request({
          url: 'http://localhost:15536/api/v1/Test/GetProducts',
          data: { pageIndex: pageindex, pageSize: pagesize },
          method: 'GET',
          header: {
            'content-type': 'application/json'
          },
          success: function (res) {
            //把已加载的数据与新数据拼接
            if (pageindex > 0 && oldpicture!=null){
              console.log("oldpicture " + oldpicture)
              var newpicture = oldpicture.concat(res.data.Data);
              console.log(">0 " + newpicture)
            }else{
              var newpicture = res.data.Data;
              console.log("=0 " + newpicture)
            }
            
            that.setData({
              hasnextpage: res.data.HasNextPage,
              pageindex:res.data.PageIndex,
              pagesize:res.data.PageSize,
              picture: newpicture
            });
          }
        });
      },
    
      //产品详情
      showpro: function () {
        var that = this;
        wx.request({
          url: 'http://localhost:15536/api/v1/Test/GetProductById',
          data: { id: 1 },
          method: 'GET',
          header: {
            'content-type': 'application/json'
          },
          success: function (res) {
            that.setData({
              product: res.data
            });
          }
        })
      }
    })
  • 相关阅读:
    php5.5+apache2.4+mysql5.7在windows下的配置
    rsync命令详解
    JVM GC算法 CMS 详解(转)
    JVM1.6 GC详解
    hadoop2升级的那点事情(详解)
    免费SVN空间
    JAVA正则表达式:Pattern类与Matcher类详解(转)
    Eclipse插件安装方式及使用说明
    可扩展Web架构与分布式系统(转)
    关于《Selenium3自动化测试实战--基于python语言》
  • 原文地址:https://www.cnblogs.com/ideacore/p/7724879.html
Copyright © 2011-2022 走看看