本文共 10696 字，大约阅读时间需要 35 分钟。

技术交流QQ群:170933152 

继续项目,做玩命加载中,一进来以后,咱们可以认为是没有数据的.

咱们来做这个玩命加载. 比如咱们在home.js中添加数据: var api = require('../../utils/api.js'); Page({ data:{ pn:1, list:[], //1.这里添加一个标识,开始的时候是true意味着 //用户一打开手机,是true,代表正在加载中 // showLoading:true }, onLoad:function(options){ api.getList('in_theaters',this.data.pn).then(res=>{ console.log(res); this.setData({ list:res.subjects, //2.数据加载以后,改成false showLoading:false }) }) }, onReady:function(){ }, onShow:function(){ }, onHide:function(){ }, onUnload:function(){ }, onPullDownRefresh:function(){ }, onReachBottom:function(){ } }) ---------------- 页面上,添加显示玩命加载中的部分: home.wxml //1.这里添加,判断 // <block wx:if="{ {showLoading}}">    <view class="page-loading">    <image class="img-loading" src="/image/1.gif"></image>    <text>正在玩命加载中...</text>    </view> </block> <block wx:else> <view wx:for="{ {list}}" class="mod-list"> <!--左边的view--> <view class="left"> <image src="{ {item.images.large}}"></image> </view> <view class="right"> <view class="row">{ {item.original_title}}{ {item.year}}</view> <view class="row">评分:{ {item.rating.average}}</view> <view class="row"> <view class="tag">导演:</view> <view wx:for="{ {item.directors}}" wx:for-item="c"> { {c.name}}  </view> </view> <view class="row"> <view class="tag">主演:</view> <view wx:for="{ {item.casts}}" wx:for-item="d"> { {d.name}}  </view> </view> </view> </view> </block> ------------------------- 然后修改一下样式: 好看一些: app.wxss: /**app.wxss**/ .container {   height: 100%;   display: flex;   flex-direction: column;   align-items: center;   justify-content: space-between;   padding: 200rpx 0;   box-sizing: border-box; }  .left{ width:200rpx; height:250rpx;     margin-right:20rpx;     font-size:14px; } .left image{ width:200rpx; height:250rpx; } .right{ width:500rpx; } .mod-list{ display:flex; padding:10rpx 20rpx; } .mod-list .row{ display:flex; font-size:14px; line-height:24px; } .tag{ width:45px; } //1.添加page-loading .page-loading{ display:flex; justify-content:center; align-items:center; font-size:14px; padding-top:20px; } //2.添加img-loading .page-loading .img-loading{ width:30rpx; height:30rpx; } ----------------------------- 好,这样,看看效果,咱们就做完了,开始进入app的时候, 显示正在玩命加载中,加载以后,就可以显示数据了 然后,咱们来做,当滚动条滑动到底部的时候自动去加载数据. 需要用到scroll-view组件: 看看api: https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html scroll-view 可滚动视图区域。 属性名 类型 默认值 说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 lower-threshold Number 50 距底部/右边多远时（单位px），触发 scrolltolower 事件 scroll-top Number 设置竖向滚动条位置 scroll-left Number 设置横向滚动条位置 scroll-into-view String 值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部 bindscrolltoupper EventHandle 滚动到顶部/左边，会触发 scrolltoupper 事件 bindscrolltolower EventHandle 滚动到底部/右边，会触发 scrolltolower 事件 bindscroll EventHandle 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} 好,首先在home.wxml中添加滚动条: <block wx:if="{ {showLoading}}">    <view class="page-loading">    <image class="img-loading" src="/image/1.gif"></image>    <text>正在玩命加载中...</text>    </view> </block> <block wx:else> //1.这里添加滚动条,注意,需要给滚动条高度才行 //class="sv"这里通过css给高度 //scroll-y="{ {true}}"纵向滚动条 //bindscrolltolower="scrolltolower"绑定事件 //scroll-top="100"距离底部100像素时触发事件 //scroll-view把想要显示的内容包裹住 // <scroll-view class="sv" scroll-top="100" scroll-y="{ {true}}"   bindscrolltolower="scrolltolower"> <view wx:for="{ {list}}" class="mod-list"> <!--左边的view--> <view class="left"> <image src="{ {item.images.large}}"></image> </view> <view class="right"> <view class="row">{ {item.original_title}}{ {item.year}}</view> <view class="row">评分:{ {item.rating.average}}</view> <view class="row"> <view class="tag">导演:</view> <view wx:for="{ {item.directors}}" wx:for-item="c"> { {c.name}}  </view> </view> <view class="row"> <view class="tag">主演:</view> <view wx:for="{ {item.casts}}" wx:for-item="d"> { {d.name}}  </view> </view> </view> </view> //2.显示正在玩命加载中等信息 //这里给个数据判断,showMore //开始showMore是true //正在玩命加载中被显示  <block wx:if="{ {showMore}}">  <view class="page-loading">   <image class="img-loading" src="/image/1.gif"></image>    <text>正在玩命加载中...</text>    </view>  </block> //3.showMore是false的时候,显示没有更多内容了 // <block wx:else>  <view class="page-loading">    <text>没有更多内容了</text>       </view> </block> </scroll-view> </block> --------------------------------------- 然后,再来看看,js中如何处理: home.js //1.调用api.js中的方法 //这里这种用法帮助文档中有 //https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/module.html //​在需要使用这些模块的文件中，使用 require(path) 将公共代码引入 //var common = require('common.js') // helloMINA: function() { //   common.sayHello('MINA') //  }, // var api = require('../../utils/api.js'); Page({ data:{ pn:0, list:[], showLoading:true, showMore:true }, //4.添加scrolltolower滚动事件 scrolltolower:function(e){ //5.如果showMore是false说明没有数据了 //就直接return // if(!this.data.showMore)return; console.log(e); console.log(1111); //6.有数据设置新的数据 this.loadData(this.data.pn); }, loadData:function(pn){ //2.把在onLoad中的代码先拿过来封装, //通过api加载数据 // api.getList('in_theaters',pn).then(res=>{ console.log(res); //3.这里判断获取的数据的长度大于0 //subjects就设置数据 // if(res.subjects.length>0){ this.setData({ //7.这里数据要累加所以这里用了一个 //concat // list:this.data.list.concat(res.subjects), showLoading:false, pn:pn+1 }) }else{ this.setData({ //2.showMore //否则把showMore设置成false //显示没有更多数据了. // showMore:false }) } }) }, onLoad:function(options){ //1.把原来onLoad中的代码,封装一下loadData // this.loadData(this.data.pn); }, onReady:function(){ }, onShow:function(){ }, onHide:function(){ }, onUnload:function(){ }, onPullDownRefresh:function(){ }, onReachBottom:function(){ } }) ------------------------ 另外api.js中,咱们可以改进一下: //这里定义通用的部分 //比如: //1）热映 //https://api.douban.com/v2/movie/in_theaters?start=0&count=20 //2）热映详情页-detail //https://api.douban.com/v2/movie/subject/25894431 //3）即将上映 //https://api.douban.com/v2/movie/coming_soon?start=0&count=20 //他们共通的部分是: //https://api.douban.com/v2/movie // var API_URL='https://api.douban.com/v2/movie' //1.type页面类型,params参数 function fetchApi(type,params){ //这里是es6的语法 //https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html#wxrequestobject //wx.request(OBJECT) //wx.request发起的是 HTTPS 请求。 return new Promise((resolve,reject)=>{ //1.下面这部分是从帮助文档中copy出来的 // wx.request({ //2.这样指定api的地址,请求地址   url: `${API_URL}/${type}`, //仅为示例，并非真实的接口地址  // 3.data: {    //  x: '' ,      //y: ''   //},   //data这里我用传过来的 data:params,   header: {   //4.application/json   //换成json       'content-type': 'json'   },  //4.success: function(res) {    // console.log(res.data)  // }  //这里咱们指定成功的函数是:  //resolve  //失败的函数是:  //fail:reject  //  success:resolve,  fail:reject }) }) } //1.这里可以修改一下,来获取下一页的数据 // //module.exports = { // getList:function(type,pn){ // return fetchApi(type,{"start":pn*20,"count":20}).then(res=>res.data) // } module.exports = {  getList:function(type,pn=0,count=20){   return fetchApi(type,{"start":pn*count,"count":count})   .then(res=>res.data)  } } -------------------------------------- 好,这个看完以后,咱们再来看看详细页面怎么做,点击某个电影的时候 显示某个电影的详情. 在详细页面,需要把某个电影的id传过去: 这里需要使用api了 组件： https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=201715 API： 1）热映 https://api.douban.com/v2/movie/in_theaters?start=0&count=20 2）热映详情页-detail https://api.douban.com/v2/movie/subject/25894431 25894431这个id传过去 3）即将上映 https://api.douban.com/v2/movie/coming_soon?start=0&count=20 4）detail https://api.douban.com/v2/movie/subject/10484117 好,咱们把详情页的wxml写出来 detail.wxml <view class="page"> <view> </view> <view>    <view>剧情简介</view>     <view>{ {list.summary}}</view> </view> </view> 这里用到一个{ {list.summary}} 这个咱们在detail.js中定义一下: var api=require('../../utils/api.js') Page({ data:{ //1.定义改一改list注意他是一个对象,咱们用他 //来放当前的电影的对象. // list:{} }, onLoad:function(options){ //2.这里获取电影id //然后设置给变量list //然后detail.wxml中,再从list变量中获取数据 // var id=options.id; console.log(id); api.getDetail(id).then(res=>{ console.log(1111), //console.log(res), this.setData({ list:res }) }) },                onReady:function(){ }, onShow:function(){ }, onHide:function(){ }, onUnload:function(){ }, onPullDownRefresh:function(){ }, onReachBottom:function(){ } }) --------------------------------------- 然后,这里获取每个对应电影的数据,咱们封装在 api.js中: //这里定义通用的部分 //比如: //1）热映 //https://api.douban.com/v2/movie/in_theaters?start=0&count=20 //2）热映详情页-detail //https://api.douban.com/v2/movie/subject/25894431 //3）即将上映 //https://api.douban.com/v2/movie/coming_soon?start=0&count=20 //他们共通的部分是: //https://api.douban.com/v2/movie // var API_URL='https://api.douban.com/v2/movie' //1.type页面类型,params参数 function fetchApi(type,params){ //这里是es6的语法 //https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html#wxrequestobject //wx.request(OBJECT) //wx.request发起的是 HTTPS 请求。 return new Promise((resolve,reject)=>{ //1.下面这部分是从帮助文档中copy出来的 // wx.request({ //2.这样指定api的地址,请求地址   url: `${API_URL}/${type}`, //仅为示例，并非真实的接口地址  // 3.data: {    //  x: '' ,      //y: ''   //},   //data这里我用传过来的 data:params,   header: {   //4.application/json   //换成json       'content-type': 'json'   },  //4.success: function(res) {    // console.log(res.data)  // }  //这里咱们指定成功的函数是:  //resolve  //失败的函数是:  //fail:reject  //  success:resolve,  fail:reject }) }) } //module.exports = { // getList:function(type,pn){ // return fetchApi(type,{"start":pn*20,"count":20}).then(res=>res.data) // } module.exports = {  getList:function(type,pn=0,count=20){   return fetchApi(type,{"start":pn*count,"count":count})   .then(res=>res.data)  },  //1.这里提供一个getDetail函数获取某个电影的内容  getDetail:function(id){ return fetchApi("/subject/"+id).then(res=>res.data)  } } ---------------------- 好,然后咱们来看看即将上映怎么做? 很简单对吧,他有玩命加载中,还有电影列表对吧 这个跟home页面的正在热映很像,咱们把 home.js,home.wxml中的内容copy到 comming.js,comming.wxml中 比如: comming.js //1.调用api.js中的方法 //这里这种用法帮助文档中有 //https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/module.html //​在需要使用这些模块的文件中，使用 require(path) 将公共代码引入 //var common = require('common.js') // helloMINA: function() { //   common.sayHello('MINA') //  }, // var api = require('../../utils/api.js'); Page({ data:{ pn:0, list:[], showLoading:true, showMore:true }, redirect:function(e){ //1.跳转获取id对吧. //这里是跳转到详情页 //需要把某个电影的id拿到 // var id=e.currentTarget.dataset.id; console.log(id); //return; wx.navigateTo({ url:'../detail/detail?id='+id }) }, scrolltolower:function(e){ if(!this.data.showMore)return; console.log(e); console.log(1111); this.loadData(this.data.pn); }, loadData:function(pn){ //1.这里由于api不一样,所以这里需要改一改这个地址就可以了 //https://api.douban.com/v2/movie/coming_soon?start=0&count=20 // api.getList('coming_soon',pn).then(res=>{ console.log(res); if(res.subjects.length>0){ this.setData({ list:this.data.list.concat(res.subjects), showLoading:false, pn:pn+1 }) }else{ this.setData({ showMore:false }) } }) }, onLoad:function(options){ this.loadData(this.data.pn); }, onReady:function(){ }, onShow:function(){ }, onHide:function(){ }, onUnload:function(){ }, onPullDownRefresh:function(){ }, onReachBottom:function(){ } }) ------------------- 然后comming.wxml就不需要改了,直接把home.wxmlcopy过来就可以了对吧

转载地址：https://credream.blog.csdn.net/article/details/59539864 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！