微信小程序开发学习笔记008--微信小程序项目02
发布日期:2021-06-29 17:57:25
浏览次数:3
分类:技术文章
本文共 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
不错!
[***.144.177.141]2024年04月05日 18时42分33秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
开源项目|RT-Thread 软件包应用作品:小闹钟
2019-04-29
在 RT-Thread Studio 上使用 RT-Thread Nano
2019-04-29
开源项目|软件包应用作品:通用物联网系统平台
2019-04-29
单片机里面的CPU使用率是什么鬼?
2019-04-29
推荐一个优质Linux技术公众号-作者都是一线Linux代码贡献者们哦
2019-04-29
RT-Thread 编程风格指南
2019-04-29
95后高校电子教师,软硬兼修有趣有料!
2019-04-29
使用 STM32 通用 Bootloader ,让 OTA 更加 Easy
2019-04-29
Cache 的基本概念与工作原理
2019-04-29
Android程序员必备!面试一路绿灯Offer拿到手软,Android面试题及解析
2019-04-29
Android开发知识体系!腾讯+字节+阿里面经真题汇总,成功入职阿里
2019-04-29
typescript学习(进阶)
2019-04-29
三天敲一个前后端分离的员工管理系统
2019-04-29
EL表达式、JSTL标签库、文件上传和下载
2019-04-29
Cookie、Session
2019-04-29
表单重复提交
2019-04-29
Filter
2019-04-29