微信小程序可謂是9月21號(hào)之后最火的一個(gè)名詞了，一經(jīng)出現(xiàn)真是轟炸了整個(gè)開發(fā)人員，當(dāng)然很多App開發(fā)人員有了一個(gè)擔(dān)心，微信小程序的到來(lái)會(huì)不會(huì)讓移動(dòng)端App顛覆，讓移動(dòng)端的程序員失業(yè)，身為一個(gè)Android開發(fā)者我是不相信的，即使有，那也是需要個(gè)一兩年的過(guò)度和打磨才能實(shí)現(xiàn)的吧。
創(chuàng)新互聯(lián)是一家專業(yè)提供文水企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、html5、小程序制作等業(yè)務(wù)。10年已為文水眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。
不管微信小程序是否能顛覆當(dāng)今的移動(dòng)開發(fā)格局，我們都要積極向上的心態(tài)去接收，去學(xué)習(xí)。不排斥新技術(shù)，所以，心動(dòng)不如行動(dòng)，趕緊先搭建一個(gè)微信小程序開發(fā)工具。那么接下來(lái)就讓我們來(lái)開始學(xué)習(xí)列表的上拉加載和下拉刷新的實(shí)現(xiàn)吧（通過(guò)聚合數(shù)據(jù)平臺(tái)獲取微信新聞）。
1.介紹幾個(gè)組件
1.1 scroll-view 組件
注意：使用豎向滾動(dòng)時(shí)，需要給一個(gè)固定高度，通過(guò) WXSS 設(shè)置 height。
1.2 image組件
注意：mode有12種模式，其中3種是縮放模式，9種是裁剪模式。
1.3 Icon組件
iconType: [ ‘success', ‘info', ‘warn', ‘waiting', ‘safe_success', ‘safe_warn', ‘success_circle', ‘success_no_circle', ‘waiting_circle', ‘circle', ‘download', ‘info_circle', ‘cancel', ‘search', ‘clear' ]
2.列表的上拉加載和下拉刷新的實(shí)現(xiàn)
2.1先來(lái)張效果圖
2.2邏輯很簡(jiǎn)單，直接上代碼
2.2.1 detail.wxml 布局文件
加載中... 刷新中... 標(biāo)題:{{item.title}} 來(lái)源:{{item.source}} 玩命的加載中... 沒(méi)有更多內(nèi)容了
2.2.1 detail.js邏輯代碼文件
重慶分公司
重慶分公司
var network_util = require('../../utils/network_util.js');
var json_util = require('../../utils/json_util.js');
Page({
data:{
// text:"這是一個(gè)頁(yè)面"
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(){
// 頁(yè)面渲染完成
},
onShow:function(){
// 頁(yè)面顯示
},
onHide:function(){
// 頁(yè)面隱藏
},
onUnload:function(){
// 頁(yè)面關(guān)閉
},
//點(diǎn)擊事件處理
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);
})
},
})最后的效果：
關(guān)于新聞的詳情實(shí)現(xiàn)，后面在實(shí)現(xiàn)
代碼地址：http://xiazai.jb51.net/201703/yuanma/WeiXinProject-master_jb51.rar
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持創(chuàng)新互聯(lián)！
