web前端:微信小程序

By admin in web前端 on 2019年6月18日

微信小程序可谓是十一月21号之后最火的叁个名词了,一经出现真是轰炸了一切开垦职员,当然好些个App开荒人士有了二个忧郁,微信小程序的到来会不会让运动端App颠覆,让活动端的技术员没有工作,身为二个Android开垦者作者是不依赖的,纵然有,这也是索要个一两年的过度和打磨手艺促成的吗。

微信小程序 列表的上拉加载和下拉刷新的完结,小程序加载

微信小程序可谓是5月21号随后最火的叁个名词了,一经面世真是轰炸了整个开采职员,当然许多App开垦职员有了二个忧郁,微信小程序的到来会不会让活动端App颠覆,让运动端的技士失去工作,身为三个Android开采者作者是不相信的,固然有,那也是急需个一两年的过于和打磨手艺兑现的呢。

不论微信小程序是还是不是能颠覆当今的运动支付格局,我们都要主动的激情去接受,去读书。不排斥新手艺,所以,心动不比走路,赶紧先搭建多少个微信小程序开采工具。那么接下去就让大家来初阶学习列表的上拉加载和下拉刷新的兑现吗(通过聚合数据平台获得微信新闻)。

1.介绍多少个零件

1.1 scroll-view 组件

web前端 1

留神:使用竖向滚动时,必要给多个原则性中度,通过 WXSS 设置 height。

1.2 image组件

web前端 2

注意:mode有12种方式,当中3种是缩放方式,9种是裁剪情势。

1.3 Icon组件

web前端 3

iconType: [ 
‘success', ‘info', ‘warn', ‘waiting', ‘safe_success', ‘safe_warn', 
‘success_circle', ‘success_no_circle', ‘waiting_circle', ‘circle', ‘download', 
‘info_circle', ‘cancel', ‘search', ‘clear' 
]

2.列表的上拉加载和下拉刷新的完成

2.1先来张效果图

web前端 4

2.2逻辑很简短,直接上代码

2.2.1 detail.wxml 布局文件

<loading hidden="{{hidden}}" bindchange="loadingChange">
 加载中...
 </loading> 
 <scroll-view scroll-y="true" style="height: 100%;" bindscrolltolower="loadMore" bindscrolltoupper="refesh">
 <view wx:if="{{hasRefesh}}" style="display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;">
 <icon type="waiting" size="45"/><text>刷新中...</text></view>
 <view wx:else style="display:none" ><text></text></view>
 <view class="lll" wx:for="{{list}}" wx:for-item="item" bindtap="bindViewTap" 
 data-title="{{item.title}}" >
 <image style=" width: 50px;height: 50px;margin: 20rpx;" src="{{item.firstImg}}" ></image>
 <view class="eee" > 
 <view style="margin:5px;font-size:8px"> 标题:{{item.title}}</view>
 <view style="margin:5px;color:red;font-size:6px"> 来源:{{item.source}}</view>
 </view>
</view>
<view class="tips1">
 <view wx:if="{{hasMore}}" style="display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;">
 <icon type="waiting" size="45"/><text>玩命的加载中...</text></view>
 <view wx:else><text>没有更多内容了</text></view>
 </view>
 </scroll-view>

2.2.1 detail.js逻辑代码文件

var network_util = require('../../utils/network_util.js');
var json_util = require('../../utils/json_util.js');
Page({
 data:{
 // text:"这是一个页面"
 list:[],
 dd:'',
 hidden:false,
 page: 1,
 size: 20,
 hasMore:true,
 hasRefesh:false
 },
 onLoad:function(options){
 var that = this;
 var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';
 network_util._get(url,
 function(res){
 that.setData({
 list:res.data.result.list,
 hidden: true,
 });
 },function(res){
 console.log(res);
 });
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 },
 //点击事件处理
 bindViewTap: function(e) {
 console.log(e.currentTarget.dataset.title);
 },
 //加载更多
 loadMore: function(e) {
 var that = this;
 that.setData({
 hasRefesh:true,});
 if (!this.data.hasMore) return
 var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno='+(++that.data.page)+'&ps=10';
 network_util._get(url,
 function(res){
 that.setData({
 list: that.data.list.concat(res.data.result.list),
 hidden: true,
 hasRefesh:false,
 });
 },function(res){
 console.log(res);
 })
},
//刷新处理
refesh: function(e) {
 var that = this;
 that.setData({
 hasRefesh:true,
 });
 var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';
 network_util._get(url,
 function(res){
 that.setData({
 list:res.data.result.list,
 hidden: true,
 page:1,
 hasRefesh:false,
 });
 },function(res){
 console.log(res);
 })
},
})

终极的功能:

web前端 5

关于音信的详细情形完毕,前面在贯彻

代码地址:

上述正是本文的全部内容,希望本文的内容对大家的学习或然办事能带来一定的推抢,同临时间也愿意多多支持帮客之家!

列表的上拉加载和下拉刷新的兑现,小程序加载
微信小程序可谓是5月21号随后最火的四个名词了,一经面世真是轰炸了全数开…

微信小程序 scroll-view实现上拉加载与下拉刷新的实例

不管微信小程序是还是不是能颠覆当今的位移支付格局,大家都要主动的激情去接受,去上学。不排斥新技术,所以,心动比不上行动,赶紧先搭建二个微信小程序开荒工具。那么接下去就让大家来初叶读书列表的上拉加载和下拉刷新的贯彻吗(通过聚合数据平台得到微信新闻)。

贯彻效益图:

1.介绍多少个零部件

web前端 6

1.1 scroll-view 组件

如图,使用小程序的scroll-view完成的上拉加载数据,下拉刷新数据,试下代码如下:

web前端 7

js文件代码:

留神:使用竖向滚动时,必要给一个定点中度,通过 WXSS 设置 height。

var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action"; 
var page = 1; 

var GetList = function (that) { 
 that.setData({ 
 hidden: false 
 }); 
 wx.request({ 
 url: url, 
 data: { 
  pageSize: 10, 
  pageNo: page 
 }, 
 success: function (res) { 
  var l = that.data.list 
  for (var i = 0; i < res.data.length; i++) { 
  l.push(res.data[i]) 
  } 
  that.setData({ 
  list: l 
  }); 
  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 = 1; 
 this.setData({ 
  list: [], 
  scrollTop: 0 
 }); 
 GetList(this) 
 }, 
 onPullDownRefresh: function () { 
 console.log("下拉") 
 }, 
 onReachBottom: function () { 
 console.log("上拉"); 
 } 
}) 

1.2 image组件

json文件代码

web前端 8

{ 
 "navigationBarTitleText": "下拉刷新", 
 "enablePullDownRefresh": true, 
 "backgroundTextStyle": "dark" 
} 

在意:mode有12种方式,个中3种是缩放形式,9种是裁剪格局。

wxml文件代码:

1.3 Icon组件

<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="https://cdn.kuaidi100.com/images/all/56/zhongtong.png"></image> 
  <view class="text"> 
  <text class="title">{{item.carrierName}}</text> 
  <text class="description">{{item.carrierTelphone}}</text> 
  <text class="description">{{item.carrierId}}</text> 
  </view> 
 </view> 
 </scroll-view> 
 <view class="body-view"> 
 <loading hidden="{{hidden}}" bindchange="loadingChange"> 
  加载中... 
 </loading> 
 </view> 
</view> 

web前端 9

wxss文件代码

iconType: [ 
‘success', ‘info', ‘warn', ‘waiting', ‘safe_success', ‘safe_warn', 
‘success_circle', ‘success_no_circle', ‘waiting_circle', ‘circle', ‘download', 
‘info_circle', ‘cancel', ‘search', ‘clear' 
]
.container{ 
 height: 100%; 
 padding: 20rpx; 
} 

.item{ 
 display: flex; 
 margin-bottom: 50rpx; 
width:100%; 
background:#f0f0f0; 
overflow:hidden; 
} 

.img{ 
 height: 100rpx; 
 width: 100rpx; 
 border-radius: 50%; 
} 

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

.title{ 
 font-size: 50rpx; 
 margin:10rpx 100rpx 10rpx 100rpx; 
} 
.description{ 
 font-size: 50rpx; 
 align-self:flex-end; 
} 

2.列表的上拉加载和下拉刷新的兑现

注意,

2.1先来张效果图

http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action这个接口就是更具传入的页数,每次返回不同数据。

web前端 10

多谢阅读,希望能支援到我们,多谢大家对本站的帮助!

2.2逻辑不会细小略,直接上代码

你可能感兴趣的文章:

  • 微信小程序实战之上拉(分页加载)效果(2)
  • 微信小程序动态的加载数据实例代码
  • 微信小程种类表的上拉加载和下拉刷新的兑现
  • 微信小程序
    图片加载(本地,网路)实例详解
  • 微信小程序scroll-view达成横向滚动和上拉加载示例
  • 微信小程序完毕图片预加载组件
  • 微信小程序input框中投入小Logo的落实方式
  • 微信小程序
    怎样引进外部字体库iconfont的图标
  • 微信小程序达成自定义加载图标功用

2.2.1 detail.wxml 布局文件

<loading hidden="{{hidden}}" bindchange="loadingChange">
 加载中...
 </loading> 
 <scroll-view scroll-y="true" style="height: 100%;" bindscrolltolower="loadMore" bindscrolltoupper="refesh">
 <view wx:if="{{hasRefesh}}" style="display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;">
 <icon type="waiting" size="45"/><text>刷新中...</text></view>
 <view wx:else style="display:none" ><text></text></view>
 <view class="lll" wx:for="{{list}}" wx:for-item="item" bindtap="bindViewTap" 
 data-title="{{item.title}}" >
 <image style=" width: 50px;height: 50px;margin: 20rpx;" src="{{item.firstImg}}" ></image>
 <view class="eee" > 
 <view style="margin:5px;font-size:8px"> 标题:{{item.title}}</view>
 <view style="margin:5px;color:red;font-size:6px"> 来源:{{item.source}}</view>
 </view>
</view>
<view class="tips1">
 <view wx:if="{{hasMore}}" style="display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;">
 <icon type="waiting" size="45"/><text>玩命的加载中...</text></view>
 <view wx:else><text>没有更多内容了</text></view>
 </view>
 </scroll-view>

2.2.1 detail.js逻辑代码文件

var network_util = require('../../utils/network_util.js');
var json_util = require('../../utils/json_util.js');
Page({
 data:{
 // text:"这是一个页面"
 list:[],
 dd:'',
 hidden:false,
 page: 1,
 size: 20,
 hasMore:true,
 hasRefesh:false
 },
 onLoad:function(options){
 var that = this;
 var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';
 network_util._get(url,
 function(res){
 that.setData({
 list:res.data.result.list,
 hidden: true,
 });
 },function(res){
 console.log(res);
 });
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 },
 //点击事件处理
 bindViewTap: function(e) {
 console.log(e.currentTarget.dataset.title);
 },
 //加载更多
 loadMore: function(e) {
 var that = this;
 that.setData({
 hasRefesh:true,});
 if (!this.data.hasMore) return
 var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno='+(++that.data.page)+'&ps=10';
 network_util._get(url,
 function(res){
 that.setData({
 list: that.data.list.concat(res.data.result.list),
 hidden: true,
 hasRefesh:false,
 });
 },function(res){
 console.log(res);
 })
},
//刷新处理
refesh: function(e) {
 var that = this;
 that.setData({
 hasRefesh:true,
 });
 var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';
 network_util._get(url,
 function(res){
 that.setData({
 list:res.data.result.list,
 hidden: true,
 page:1,
 hasRefesh:false,
 });
 },function(res){
 console.log(res);
 })
},
})

谈到底的成效:

web前端 11

关于音信的实际情况完结,前面在完毕

代码地址:

以上正是本文的全体内容,希望本文的情节对大家的求学或然干活能推动一定的支援,同期也可望多多帮衬脚本之家!

您大概感兴趣的小说:

  • 微信小程序实战之上拉(分页加载)效果(2)
  • 微信小程序动态的加载数据实例代码
  • 微信小程序
    图片加载(本地,网路)实例详解
  • 微信小程序scroll-view达成横向滚动和上拉加载示例
  • 微信小程序
    scroll-view完结上拉加载与下拉刷新的实例
  • 微信小程序达成图片预加载组件
  • 微信小程序input框中参加小Logo的贯彻情势
  • 微信小程序
    怎么样引进外部字体库iconfont的Logo
  • 微信小程序落成自定义加载Logo功效

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门新葡亰官网app 版权所有