Chapter three
1.分类页面效果图
2分类分解图
3.分类业务逻辑
1.加载分页页面数据
2.点击左侧菜单,右侧数据动态渲染
4.接口API
1.获取分类页面数据
https://api-hmugo-web.itheima.net/api/public/v1/categories
5.关键技术
5.1.scroll--view 组件
scroll-view组件表示可滚动视图区域。属性包括水平和垂直滚动,分别为scroll-x表示允许横向滚动、scroll-y表示允许纵向滚动、scroll-top表示设置竖向滚动条位置、scroll-left表示设置横向滚动条位置,这些属性是很常见的。
设置scroll-view组件之前一定要给它组件的高度,可以是px,也可以是rpx,也可以是%,我一般常用就是rpx和%,因为根据手机屏幕大小不一样,所以需要给自适应的宽高度。如果没有设置高度,否则scroll-view组件是不会生效的。
一般需求就是多个item的地方会用到这个scroll-view组件。
主要属性有:
属性 | 类型 | 默认值 | 说明 |
scroll-x | Boolean | false | 允许横向滚动 |
scroll-y | Boolean | false | 允许纵向滚动 |
scroll-top | Number | 设置竖向滚动条位置 | |
scroll-left | Number | 设置横向滚动条位置 | |
upper-threshold | Number | 50 | 距顶部/左边多远时(单位px),触发scrolltoupper事件 |
lower-threshold | Number | 50 | 距底部/右边多远时(单位px),触发scrolltolower事件 |
scroll-into-view | String | 值应为某子元素id,则滚动到该元素,元素顶部对齐滚动区域顶部 | |
bindscrolltoupper | EventHandle | 滚动到顶部/左边,会触发scrolltoupper事件 | |
bindscrolltolower | EventHandle | 滚动到底部/右边,会触发scrolltolower事件 |
简单的代码例子:
1.wxml
1.1垂直滚动
<!--垂直滚动,一定要设置高度-->
<scroll-view scroll-y="true" style="height: 600rpx">
<view style="background: black; width: 100%; height: 300rpx" ></view>
<view style="background: green; width: 100%; height: 300rpx"></view>
<view style="background: black; width: 100%; height: 300rpx"></view>
<view style="background: green; width: 100%; height: 300rpx"></view>
<view style="background: black; width: 100%; height: 300rpx"></view>
</scroll-view>
1.2水平滚动
<!-- 水平滚动 -->
<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" >
<view style="background: red; width: 400rpx; height: 200rpx; display: inline-block" ></view>
<view style="background: green; width: 400rpx; height: 200rpx; display: inline-block"></view>
<view style="background: red; width: 400rpx; height: 200rpx; display: inline-block"></view>
<view style="background: green; width: 400rpx; height: 200rpx; display: inline-block"></view>
<view style="background: red; width: 400rpx; height: 200rpx; display: inline-block"></view>
</scroll-view>
white-space表示属性设置处理元素内的空白。
normal: 默认处理方式,文本自动处理换行。
pre: 保持HTML源代码的空格与换行,等同与pre标签。
nowrap: 强制文本在一行,除非遇到br换行标签。
pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行。
pre-line: 同pre属性,但是遇到连续空格会被看作一个空格。
inherit:
从父元素继承white-space属性的值
5.2.ES7的 async 和 await
这个ES7的async和await,都是基于ES6的Promise实现。我写过了ES6的Promise详解的文章(微信小程序实战项目(首页)——two)。一般通常,在js异步请求数据时,但想想如果多个回调函数嵌套,看起来代码不优雅。因此ES6的Promise和ES7的async和await可以解决回调函数嵌套的问题。
先说说async和await详解。
async作为异步函数,其实里面有个await使用,意思是等待的表示。但是我们要放一个返回Promise对象,而且它是等待Promise对象的执行完毕后,并返回结果。就是说,只要到await地方需要等待执行后面的对象。
1.async函数返回是一个Promise对象;
2.await后面跟着Promise对象;
3.await表示在等待Promise对象返回结果,再继续执行。
简单示范例子:
function thePromise(){
return new Promise(resolve=>{
setTimeout(()=>{
resolve('异步完成')
},1000)
})
}
async function data(){
let a = 1
a = await thePromise() // 异步完成
console.log(a)
}
data(); //调用
--结果为“异步完成”--
其实上,在await后面就是跟Promise对象。
思路:await当然会输出Promise对象resolve的值,只要Promise对象被resolve执行之后,async函数的await就会往下走。
具体的过程:首先调用data函数,再遇到await并要等待,如果代码就执行到这里,等待后面的Promise对象执行完毕后,才拿到Promise对象的resolve的值并返回结果,然后await才会继续向下执行。
对于ES7的async和await来说非常优雅,可以不需要这么多写then()。
当在JS开始渲染的时候,它们没有真正的暂停工作,其实上它可以处理其他的事情。
小程序实战项目
注意: 使用ES7的async和await之前,必须下载facebook出的runtime.js类库,否则就会报错。
首先创建一个lib/runtime/runtime.js文件,然后可以下载为:https://github.com/facebook/regenerator/blob/master/packages/regenerator-runtime/runtime.js或者把复制runtime类库的原生代码到实战项目里面去。
首先在/pages/category/index.js,(ES7的async和await)部分代码如下:
// 获取分类数据
async getCates() {
// 1 使用es7的async await来发送请求
const res = await request({ url: "/categories"});
// this.Cates = res.data.message;
this.Cates = res;
// 把接口的数据存入到本地存储中
wx.setStorageSync("cates", { time: Date.now(), data: this.Cates });
// 构造左侧的大菜单数据
let leftMenuList = this.Cates.map(v => v.cat_name);
// 构造右侧的商品数据
let rightContent = this.Cates[0].children;
this.setData({
leftMenuList,
rightContent
})
},
在/pages/category/index.js,然后引入为../../request/index.js和../../lib/runtime/runtime。引入完成后,最后保证不会报错。
import { request } from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
在/request/index.js,其实上request是定义公共的url,(ES6的Promise对象)部分代码如下:
//url:"https://api-hmugo-web.itheima.net/api/public/v1/categories"
const baseUrl="https://api-hmugo-web.itheima.net/api/public/v1";
//返回new Promise对象
return new Promise((resolve,reject)=>{
wx.request({
...params,//ES6,对象的扩展运算符
url:baseUrl+params.url,
success:(result)=>{
resolve(result.data.message);
},
fail:(err)=>{
reject(err);
}
});
})
其实上这两者都是联系起来,就像跟上面(ES7的async和await)过程讲解一样。
这样OK!!!
下一期就是小程序商品列表-four
不断更新中.....给知识充电中。
欢迎各位大佬评论、点赞和收藏!Thanks