北京网帮你
Thinkphp5接口返回json格试微信小程序滑动事件加载数据
时间:2017-12-14 14:24:33 浏览:59

           


小程序滑动事件加载数据列用了scroll-view滚动视图区域。先来看看官方的说明

       

1 属性名  类型  默认值  说明
2 scroll-x  Boolean  false  允许横向滚动
3 scroll-y  Boolean  false  允许纵向滚动
4 upper-threshold  Number  50  距顶部/左边多远时(单位px),触发 scrolltoupper 事件
5 lower-threshold  Number  50  距底部/右边多远时(单位px),触发 scrolltolower 事件
6 scroll-top  Number   设置竖向滚动条位置
7 scroll-left  Number   设置横向滚动条位置
8 scroll-into-view  String   值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
9 scroll-with-animation  Boolean  false  在设置滚动条位置时使用动画过渡
10 enable-back-to-top  Boolean  false  iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向
11 bindscrolltoupper  EventHandle   滚动到顶部/左边,会触发 scrolltoupper 事件
12 bindscrolltolower  EventHandle   滚动到底部/右边,会触发 scrolltolower 事件
13 bindscroll  EventHandle   滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

我用的是bindscrolltolower触发事件lower


1 <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;"  
2        class="list" bindscrolltolower="lower" >  
3   <block wx:for="{{specialisdata}}" wx:key="item">
4  <navigator url="../specialistxq/specialistxq?id={{item.id}}&title={{item.name}}-{{item.position}}">
5    <view class="item">
6     <image src="{{ requestUrl}}{{item.picurl}}" class="slide-image"  mode='widthFix'/>
7      <view class="meta">
8        <text class="title">{{item.name}}        {{item.position}}   </text>
9        <view class="artists">{{item.janjie}}...  </view>
10        
11      </view>
12      <view class="navigator-arrow"></view>
13    </view>
14  </navigator>
15 </block>
16 </scroll-view>  
17
18  <view class="body-view">  
19        <loading hidden="{{hidden}}" bindchange="loadingChange">  
20            加载中...  
21        </loading>  
22    </view>  
23

js代码:




1 var i=1;
2 var arrlist=[];
3 Page({
4
5  onReady() {
6
7    var that = this;
8    wx.request({
9      url:  'http://127.0.0.1/news/list//pageSize/8/pageNumber/1', //仅为示例,并非真实的接口地址
10      data: {},
11      header: {
12        'content-type': 'application/json' // 默认值
13      },
14      success: function (res) {
15    
16    
17    
18          arrlist.push(res.data.data)//追加
19    
20      
21        console.log(arrlist);
22        
23        that.setData({
24          newsdata: arrlist[0],
25        
26        
27        })
28
29        wx.getSystemInfo({
30          success: function (res) {
31           // console.info(res.windowHeight);
32            that.setData({
33              scrollHeight: res.windowHeight
34            });
35          }
36        });  
37        that.setData({
38          hidden: true
39        });  
40
41
42      }
43
44
45    });
46
47
48  }, data: {
49    hidden: false,
50    scrollTop: 0,
51    scrollHeight: 0
52  }, lower: function (e) {
53   i++;
54   console.log(i);
55    var that = this;
56
57    wx.request({
58      url: 'http://127.0.0.1/news/list/pageSize/8/pageNumber/'+i, //仅为示例,并非真实的接口地址
59      data: {},
60      header: {
61        'content-type': 'application/json' // 默认值
62      },
63      success: function (res) {
64        if (res.data.data==""){
65          wx.showToast({
66            title: '没有数据了',
67            icon: 'loading',
68            duration: 1000
69          })
70          return;
71        }
72        
73    
74        for (var i = 0; i < res.data.data.length; i++) {
75      
76          arrlist[0].push(res.data.data[i])//追加
77        }  
78    
79        that.setData({
80          newsdata: arrlist[0],
81
82
83        })
84
85        console.log(arrlist);
86    
87        wx.getSystemInfo({
88          success: function (res) {
89            console.info(res.windowHeight);
90            that.setData({
91              scrollHeight: res.windowHeight
92            });
93          }
94        });
95        that.setData({
96          hidden: true
97        });  
98      
99        //  wx.setNavigationBarTitle({ title: res.data.data.unitname })
100
101



[上一篇]没有了
[下一篇]新媒体"二维码"推广时

Copyright 2014 wbnsp.com copyright, all rights reserved

2014 版权所有 红花岗区网帮你信息技术工作室

工信部备案号: 黔ICP备14004469号

扫描二维码用手机发部信息