我们首先看下商品列表页面
一下子就跳到了
ziyuan.vue
<template>
<view>
<ShopList :goodsList ="goodsList"></ShopList>
</view>
</template>
<script>
// 黑马商城
import ShopList from "../../component/ShopList/ShopList"
export default {
data() {
return {
goodsList:[]
};
},
components:{
ShopList
},
methods:{
async getShopList(page){
let goodsList = await this.$req({url:"/api/getgoods?pageindex="+page});
this.goodsList = goodsList.data.message;
}
},
onReachBottom(){
//事件发送没有任何问题，可见再简单的知识也需要不断的练习
this.$bus.$emit("reachBottom");
},
onLoad(){
this.getShopList(1);
}
}
</script>
<style lang="scss">
</style>
在这个页面中，引入了ShopList 组件
ShopList.vue
<template>
<view>
<view class="shop_list">
<view class="list_item" v-for="good in goodsList" :key ="good.id" @click="goDetail(good.id)">
<image src="http://www.yikuaiziyuan.cn/zb_users/theme/qk_xmh/include/random/4.jpg"></image>
<view class="price">
<text>￥{
{good.sell_price}}</text>
<text>￥{
{good.market_price}}</text>
</view>
<view class="desc">
{
{good.title}}
</view>
</view>
<text v-if="isBottom">我是有底线的</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
goodsList:[],
currentIndex:1,
isBottom:false// 判断是否到达底部
}
},
methods: {
goDetail(path){
},
async getShopList(page){
let goodsList = await this.$req({url:"/api/getgoods?pageindex="+page});
console.log(goodsList)
this.goodsList = goodsList.data.message;
},
reachBottom(){
this.currentIndex++;
if(!this.isBottom){
let tempList = this.$req({url:"/api/getgoods?pageindex="+this.currentIndex});
tempList.then(data=>{
if(!tempList && tempList.length>=10){
let tList =data.data.message;
console.log(tList,this.currentIndex)
this.goodsList = [...this.goodsList,...tList];
}else{
this.isBottom = true;
}
})
}
}
},
mounted(){
this.getShopList(1)
this.$bus.$on("reachBottom",this.reachBottom)
},
// 下拉刷新
onPullDownRefresh(){
console.log("我刷新了。。。")
this.isBottom= false;
this.currentIndex = 1;
// 存放数据的数组
this.goodsList = [];
setTimeout( async ()=>{
this.getShopList(1)
uni.stopPullDownRefresh();
},1000)
}
}
</script>
<style lang="scss">
.shop_list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: #CCC;
// 我们在写样式的时候尽可能use className
.list_item{
box-sizing: border-box;
width: 367rpx;
height:500rpx;
padding: 8px;
background-color: #FFFFFF;
margin:5px 0;
image{
width: 100%;
height: 50%;
}
.price{
text{
color:#b50e03;
font-size: 19px;
}
text:nth-child(2){
font-size: 15px;
text-decoration: line-through;
margin-left: 10rpx;
color:#ccc;
}
}
.desc{
font-size: 15px;
line-height: 27px;
padding-bottom: 8px;
padding-top: 5px;
}
}
}
</style>
而我们的下拉刷新和上拉加载更多的逻辑，都写在了ShopList 组件中了
在这里我要说的，当上啦加载更多的监听函数需要在 ziyuan.vue 中监听，然后传递给 ShopList 组件
父亲传递给儿子事件的处理，这里我采用了全局的总线模式！
我在main.js 入口文件中这样定义
和原生vue 一摸一样
这点我很开心的了解，下面就是$on ,$emit 的使用
好，我们在ShopList 组件接收事件
我们在写上拉加载更多的时候，需要区分是否拉到了底部这个状态，大凡需要是动态的状态，我们全部都要在 data 数据中定义
这点我们写组件写出水平来了！
我们需要定义，当前是第几页，是否拉到底部，把数据存放在一个集合中
、
这里你大胆去写，出错的可能多半是
我这个逻辑是先去或如数据，然后根据返回的数据的数量进行判断，若>=10 则有下一页，若<10 铁定没有下一页
若是最后一次刚好10页，没事多发一次请求，浪费不少多少时间！
为啥会有处理是否到达最后一页的需求，因为已经到达最后一页了，就不要再去发请求了，何况我么还要显示，我是有底线的！
行，到此上拉加载就写完了，
下拉刷新
1， 开启刷新
2， 监听处理
下拉刷新，回到第一页的数据时的 状态