微信小程序开发学习笔记008--微信小程序项目02

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lidew521/article/details/59539864

技术交流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过来就可以了对吧





展开阅读全文

没有更多推荐了,返回首页