##1.介紹幾個組件


1.1 scroll-view 組件

這里寫圖片描述

注意：使用豎向滾動時，需要給一個固定高度，通過 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.列表的上拉加載和下拉刷新的實現(xiàn)

##2.1先來張效果圖 這里寫圖片描述 ##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>沒有更多內(nèi)容了</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(){
? ? // 頁面關(guā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,###? ? ? ?有刷新：假，
? ? });
? ? },函數(shù)(res){
? ? ?console.log(res);
?})
},
})