产品列表页开发
在产品列表页面总共需要开发 4 项功能，分别是产品列表渲染、产品价格排序、产品价格范围筛选以及产品分页，通过产品列表可以深入理解参数传递、element-ui 等知识点的应用。
布局产品列表静态页面
产品列表静态页面代码如下（视频中含详细布局讲解）。
|
CSS 代码可以在配套资源中下载。 |
<template>
<view>
<view class="sort_menu">
<view class="sort_menu_li">
综合排序
</view>
<view class="sort_menu_li">
价格由低到高
</view>
<view class="sort_menu_li">
价格由高到低
</view>
</view>
<view class="price">
<view class="price_li">
<input type="text" value="" />
</view>
<view class="price_li">
-
</view>
<view class="price_li">
<input type="text" value="" />
</view>
<view class="price_li">
<text>单击</text>
</view>
</view>
<view class="index_hot">
<view class="index_product_main">
<view class="index_product_li">
<image src="/static/p2.jpg" mode="widthFix"></image>
<text>产品名称</text>
<text>产品价格</text>
</view>
<view class="index_product_li">
<image src="/static/p2.jpg" mode="widthFix"></image>
<text>产品名称</text>
<text>产品价格</text>
</view>
<view class="index_product_li">
<image src="/static/p2.jpg" mode="widthFix"></image>
<text>产品名称</text>
<text>产品价格</text>
</view>
<view class="index_product_li">
<image src="/static/p2.jpg" mode="widthFix"></image>
<text>产品名称</text>
<text>产品价格</text>
</view>
<view class="index_product_li">
<image src="/static/p2.jpg" mode="widthFix"></image>
<text>产品名称</text>
<text>产品价格</text>
</view>
</view>
</view>
<view class="footer">
</view>
</view>
</template>渲染产品列表数据
本节完成产品列表数据的获取，通过整个产品列表页面，大家可以掌握参数传递、链式跳转等知识点。
请求方式：get请求。
需求分析如下。 （1）在data属性中定义productList空数组，接收获取到的产品数据。 （2）在methods属性中定义发送数据请求的方法。 （3）在onLoad生命周期函数调用数据请求的方法。
export default {
data() {
return {
productList: []
}
},
methods: {
getData() {
uni.request({
url: `http://api.mm2018.com:8095/api/goods/allGoods?page=1&size=8&sort=''&priceGt=''&priceLte=''`,
method: 'GET',
success: res => {
console.log(res.data.data)
this.productList = res.data.data
}
})
}
},
onLoad() {
this.getData()
}
}将获取到的 productList 数组渲染到视图层，代码如下。
<view class="index_hot">
<view class="index_product_main">
<view class="index_product_li" v-for="(item,i) in productList" :key="i">
<image :src="item.productImageUrl" mode="widthFix"></image>
<text>{{item.productName}}</text>
<text>{{item.salePrice}}</text>
</view>
</view>
</view>价格排序功能
在接口中有 sort 参数，当 sort 为空时，表示价格综合排序，当 sort 为 1 时，表示价格由低到高，当 sort 为 −1 时，表示价格由高到低，代码如下。
视图层代码如下。
<template>
<view class="sort_menu">
<view class="sort_menu_li" @click="sortData(0)">
综合排序
</view>
<view class="sort_menu_li" @click="sortData(1)">
价格由低到高
</view>
<view class="sort_menu_li" @click="sortData(2)">
价格由高到低
</view>
</view>
</template>JS 逻辑代码如下。
<script>
export default {
data() {
return {
productList: [],
//1．定义sort属性，0为综合排序，1为正序，-1为倒序
sort: null
}
},
methods: {
getData() {
uni.request({
//2．在模板字符串中使用sort属性
url: `http://api.mm2018.com:8095/api/goods/allGoods?page=1&size=8&sort=${this.sort}&priceGt=''&priceLte=''`,
method: 'GET',
success: res => {
console.log(res.data.data)
this.productList = res.data.data
}
})
},
//4．定义单击方法并接收参数
sortData(i) {
if (i == 0) {
//综合排序
this.sort = null
this.getData()
}
if (i == 1) {
this.sort = 1 //价格由低到高
this.getData()
}
if (i == 2) {
this.sort = -1 //价格由高到低
this.getData()
}
}
},
onLoad() {
this.getData()
}
}
</script>代码解析如下。
修改 sort 值后，需要再次调用 getData 方法，获取最新数据。
价格范围筛选功能
在接口中，priceGt 参数表示最小值，priceLte 参数表示最大值，使用双向数据绑定获取用户输入的价格，代码如下。
视图层代码如下。
<template>
<view class="price">
<view class="price_li">
<input type="text" v-model="priceGt" />
</view>
<view class="price_li">
-
</view>
<view class="price_li">
<input type="text" v-model="priceLte" />
</view>
<view class="price_li">
<text @click="priceData()">单击</text>
</view>
</view>
</template>JS 代码如下。
<script>
export default {
data() {
return {
productList: [],
sort: null,
priceGt: null,
priceLte: null
}
},
methods: {
getData() {
uni.request({
url: `http://api.mm2018.com:8095/api/goods/allGoods?page=1&size=8&sort=${this.sort}&priceGt=${this.priceGt}&priceLte=${this.priceLte}`,
method: 'GET',
success: res => {
console.log(res.data.data)
this.productList = res.data.data
}
})
},
sortData(i) {
//综合排序
if (i == 0) {
this.sort = null
this.getData()
}
if (i == 1) {
//价格由低到高
this.sort = 1
this.getData()
}
if (i == 2) {
//价格由高到低
this.sort = -1
this.getData()
}
},
//2．单击按钮重新获取数据即可
priceData() {
if (this.priceLte > this.priceGt) {
this.getData()
}
}
},
onLoad() {
this.getData()
}
}
</script>