您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

vue项目第四天商品列表、购物车

发布时间：2020-05-08 00:14:33编辑：雪饮阅读（）

 

商品列表界面没有什么特别的，主要就是使用了一个下拉触底的mint-ui的组件

商品列表组件GoodsShow.vue如：

<template>
    <div :style="{ height:wrapperHeight + 'px' }" ref="wrapper">
        <nav-bar title="商品展示"/>
        <mt-loadmore :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" :auto-fill="autoFill" ref="loadmore" style="margin-bottom: 55px">
        <ul>
            <li v-for="goods in goodsList" :key="goods.id">
                <router-link :to="{ name:'GoodsDetail',query:{id:goods.id } }">
                    <img :src="goods.img_url">
                    <div class="title">{{goods.title | subtextEllipsis(23,'')}}</div>
                    <div class="desc">
                        <div class="sell">
                            <span>￥{{goods.sell_price}}</span>
                            <s>￥{{goods.market_price}}</s>
                        </div>
                        <div class="detail">
                            <div class="hot">
                                热卖中
                            </div>
                            <div class="count">
                                剩{{goods.stock_quantity}}件
                            </div>
                        </div>
                    </div>
                </router-link>
            </li>
        </ul>
    </mt-loadmore>
    </div>
</template>
<script>
/**
 * 总结:  loadmore中的属性
 *     1:buttomLoad 函数
 *     2:禁止buttomLoad  bottom-all-loaded 默认为false ,true就禁止
 *     3: auto-fill 默认true，自动检测父容器，并调用buttomLoad直到撑满父容器
 *     4: pull 拉动未满足70px ,  drop 达到70px ,loading加载中
 *     原理：父容器固定高度，子容器可变高度，当子容器向上拖拽进入父容器越过buttom一定距离时就会触发，这里假定为70
 *     5: loadmore组件对象的 onBottomLoaded() 通知结束loading进入Pull状态
 *     6: 在组件上写ref="xxx"   在js中通过this.$refs.xxx 获取组件对象
 *     6: 在普通元素上写ref="xxx"   在js中通过this.$refs.xxx 获取DOM对象
 *     7: 上拉加载更多公式
 *         进入检测机制 =>   可视高度 + 卷入高度 = 所有的数据高度
 */



    export default {
        name: 'GoodsShow',
        data() {
            return {
                goodsList:[],// 商品数据
                allLoaded:false,// 为true禁止调用拉动函数
                autoFill:false, // 自动调用loadBottom直到撑满父容器
                page: this.$route.params.page,
                wrapperHeight:0 , // 父容器高度
            }
        },
        methods : {
            loadBottom() {
                this.loadGoodsByPage();
                // 通知状态改变
                this.$refs.loadmore.onBottomLoaded();
            },
            handleBottomChange(status) {
                console.log(status);
            },
            loadGoodsByPage() {
                 // 拼接URL 发起请求
                this.$axios.get(`/api/getgoods?page=${this.page}`)
                .then(res=>{
                    let { length } = res.data.message.data;
                    if (length ==0) {
                        this.$toast('没有更多数据了');
                        // 没有数据了
                        this.allLoaded = true;
                        return;
                    }

                    if (this.page === 1) {
                        this.goodsList = res.data.message.data;
                    } else {
                        // 追加
                        this.goodsList = this.goodsList.concat(res.data.message.data);
                    }

                    this.page ++;// 页码自增
                })
                .catch(console.log)
                }
        },
        created() {
            // 获取页码
            // let { page } = this.$route.params;
            this.loadGoodsByPage();
        },
         mounted() {
            // 父容器高度（可视） = 设备高度 - 父容器的top
          this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
        }
    }

</script>
<style scoped>

ul {
    padding: 0;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}
li {
    width: 300px;
    padding: 6px;
    box-sizing: border-box;
  list-style: none;
  height: 300px;
}

li > a{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction:column;
  justify-content: space-between;
}
li > a:not(.mui-btn) {
    margin: 0px;
    padding: 0px;
    border: 1px solid #5c5c5c;
    box-shadow: 0 0 4px #666;
    width: 100%;
}

li > a:not(.mui-btn) img {
     width: 100%;
}

.sell > span {
    float: left;
    color: red;
    text-align: left;
}

.detail >.hot {
    float: left;
    text-align: left;
    font-size: 15px;
}

.detail >.count {
    float: right;
    text-align: right;
    font-size: 15px;
}


/*撑开，去除浮动没有的高度*/

.detail {
    overflow: hidden;
  clear: both;
}

.desc {
    color: rgba(92, 92, 92, 0.8);
    background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction:column;
  align-content: end;
}

img {
    height: 200px;
  display: block;
}
  .mint-loadmore{
    margin-top:80px;
  }
</style>

则home组件中“商品展示”链接到该商品列表组件

return {
   imgs:[{img:'../static/7.jpg'},{img:'../static/7.jpg'},{img:'../static/7.jpg'}],
   modules:[
     {title:'新闻咨询',className:'back-news',route:{name:'NewsList'}},
     {title:'图文分享',className:'back-pic',route:{name:'PhotoList',query:{categoryId:0}}},
     {title:'商品展示',className:'back-goods',route:{name:'GoodsShow',params:{page:1}}},
     {title:'留言反馈',className:'back-feed',route:{name:'home'}},
     {title:'搜索咨询',className:'back-search',route:{name:'home'}},
     {title:'联系我们',className:'back-callme',route:{name:'home'}},
   ]
 }

则src/router/index.js中导入该商品列表组件

import PhotoDetail from '../components/Photo/PhotoDetail'
 import GoodsShow from '../components/Goods/GoodsShow'

并且加入到路由表项中

{
   path: '/news/detail/:id',
   name: 'NewsDetail',
   component: NewsDetail
 },
 {
   path: '/Goods/GoodsShow/:page',
   name: 'GoodsShow',
   component: GoodsShow
 }