购好物，首页，热销排行自动无限循环滚动组件，完成~

王强
1 parent 4ee40502
Showing 7 changed files with 334 additions and 7 deletions
src/components/horizList/horizList.vue
src/components/marqueeBox/marqueeBox.less
src/components/marqueeBox/marqueeBox.vue
src/components/marqueeCom/marqueeCom.less
src/components/marqueeCom/marqueeCom.vue
src/pages/optimization2/optimization2.less
src/pages/optimization2/optimization2.vue
@@ -94,7 +94,7 @@
 	import goodsItem1 from "@/components/goodsItem_1/goodsItem_1";
 	import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
 	import goodsItem3 from "@/components/goodsItem_3/goodsItem_3";
-	import goodsItem10 from '@/components/goodsItem_10/goodsItem_10.vue';
+	import goodsItem10 from '@/components/goodsItem_10/goodsItem_10';
 	import swiperItem from "@/components/swiperItem/swiperItem";
     import shopDarenHot from "@/components/shopDarenHot/shopDarenHot";
 	import titleSubTitleCom from "@/components/titleSubTitleCom/titleSubTitleCom";
@@ -128,6 +128,7 @@
 			jump(item) {
 				this.$emit("jump", item);
 			},
+
             /**
 			 * 跳转到达人个人中心页面
 			 * @param {object} item [数据对象]
@@ -135,6 +136,7 @@
 			userJump(item) {
 				this.$emit("userJump", item);
 			},
+
 			/**
 			 * 关注
 			 * @param {object} item [数据对象]
@@ -142,6 +144,7 @@
 			fansShop(item){
 				this.$emit("fansShop", item);
 			},
+			
 			/**
 			 * 加入购物车
 			 * @param {object} item [数据对象]
+@charset "UTF-8";
+
+.marquee-box {
+	background-color: transparent;
+	width: 100%;
+	height: auto;
+	.title-box + .box {
+		margin-top: 30px;
+	}
+	> .box {
+		width: 750px;
+	}
+}
+<template>
+    <div class="marquee-box" v-if="lists && lists.length">
+
+		<!-- 标题插槽 -->
+		<slot name="title-box"></slot>
+
+		<!-- 内容区域 -->
+		<div class="box">
+			
+			<!-- 无限横向自动滚动组件 -->
+			<marquee-com @jump="jump" @addCart="addCart" @primary="primary"
+				:lists="lists"
+				com="10"
+                pid="1"
+				:options="options">
+			</marquee-com>
+		</div>
+    </div>
+</template>
+
+<script>
+
+	// 引入组件
+	import marqueeCom from '@/components/marqueeCom/marqueeCom';
+	
+    export default {
+		name: "marqueeBox",
+        data() {
+            return {
+                
+            }
+        },
+		props: ["lists", "options"],
+		components: {
+			marqueeCom
+        },
+		methods: {
+
+			/**
+			 * 点击跳转
+			 * @param {object} item [数据对象]
+			 */
+			jump(item) {
+				this.$emit("jump", item);
+			},
+			
+			/**
+			 * 加入购物车
+			 * @param {object} item [数据对象]
+			 */
+			addCart(item) {
+				this.$emit("addCart", item);
+			},
+
+			/**
+			 * 主按钮点击事件
+			 * @param {object} item [数据对象]
+			 */
+			primary(item) {
+				this.$emit("primary", item);
+			}
+		},
+		watch: {
+			
+		},
+		mounted() {
+			
+		}
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less" scoped>
+    @import './marqueeBox';
+</style>
+@charset "UTF-8";
+
+.marquee-com {
+	width: 100%;
+	overflow: hidden;
+	.box {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+	}
+}
 \ No newline at end of file
+<template>
+    <div class="marquee-com" v-if="lists && lists.length">
+        <div class="box" ref="marqueesBox">
+
+            <!-- 判断是否有Clone数组 -->
+            <template v-if="listsClone && listsClone.length">
+
+                <!-- 循环输出列表 -->
+                <div class="item" ref="items" v-for="(item, index) in listsClone" :key="index">
+
+                    <!--
+                        com=1：goodsItem_1组件，pid：1、3，固定不滚动；2、4，滚动
+                            事件：
+                                @jump：整个点击跳转事件
+                                @addCart：右下角加入购物车按钮事件，已阻止事件冒泡
+
+                        com=2：goodsItem_2组件，pid: 1，带标题，不显示附加信息；2、不带标题，显示附加信息
+                            事件：
+                                @jump：整个点击跳转事件
+
+                        com=3：goodsItem_3组件，无pid参数
+                            事件：
+                                @jump：整个点击跳转事件
+                                @primary：右下角红色主按钮点击事件，已阻止事件冒泡
+
+                        com=10：goodsItem_10组件，pid: 1，价格，原价；2、积分信息
+                            事件：
+                                @jump：整个点击跳转事件
+                        
+                        -->
+
+                    <!-- 商品展示样式 1 -->
+                    <goods-item-1 v-if="com == '1'" @jump="jump" @addCart="addCart"
+                        :item="item"
+                        :pid="pid">
+                    </goods-item-1>
+
+                    <!-- 商品展示样式 2 -->
+                    <goods-item-2 v-if="com == '2'" @jump="jump"
+                        :item="item"
+                        :pid="pid">
+                    </goods-item-2>
+
+                    <!-- 商品展示样式 3 -->
+                    <goods-item-3 v-if="com == '3'" @jump="jump" @primary="primary"
+                        :item="item">
+                    </goods-item-3>
+
+                    <!-- 商品展示样式 10 -->
+                    <goods-item-10 v-if="com == '10'" @jump="jump"
+                        :item="item"
+                        :pid="pid">
+                    </goods-item-10>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+
+    // 引入组件
+	import goodsItem1 from "@/components/goodsItem_1/goodsItem_1";
+	import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
+	import goodsItem3 from "@/components/goodsItem_3/goodsItem_3";
+	import goodsItem10 from '@/components/goodsItem_10/goodsItem_10';
+
+    export default {
+        name : 'marqueeCom',
+        props: ['lists', 'com', 'pid', 'options'],
+        data () {
+            return {
+                listsClone: []      // lists深度拷贝对象
+            }
+        },
+        components: {
+            goodsItem1,
+			goodsItem2,
+			goodsItem3,
+			goodsItem10
+        },
+        methods: {
+
+            /**
+             * 跑马灯无限循环移动函数
+             * @param {Object} itemWidth [元素宽度，用户处理添加/删除元素逻辑]
+             * @param {Object} marqueesBox [列表元素DOM对象]
+             */
+            move(itemWidth, marqueesBox) {
+                
+                // 位移量
+                let distance = 0;
+
+                // 追加第几个数组数据下标
+                let sub = null;
+
+                // 检查配置选项，设置轮训时间
+                let timer = (this.options && this.options.timer && this.options.timer > 0) ? this.options.timer : 30;
+
+                // 设置位移
+                let interval = setInterval(() => {
+                
+                    // 计算位移量
+                    distance = distance - 1;
+
+                    // 向左移动
+                    marqueesBox.style.transform = 'translateX(' + distance + 'px)';
+
+                    // 判断添加/删除元素
+                    if (!(distance % itemWidth)) {
+
+                        // 判断应该追加第几个数组数据下标
+                        if (!sub) {
+                            sub = 0;
+                        }
+
+                        // 追加数据到listsClone数组
+                        this.$set(this, 'listsClone', [...this.listsClone, ...[this.lists[sub]]]);
+
+                        // 判断数组下标是否越界
+                        if (sub < this.lists.length - 1) {
+                            sub++;
+                        } else {
+                            sub = 0;
+                        }
+                    }
+                }, timer);
+            },
+
+			/**
+			 * 点击跳转
+			 * @param {object} item [数据对象]
+			 */
+			jump(item) {
+				this.$emit("jump", item);
+			},
+			
+			/**
+			 * 加入购物车
+			 * @param {object} item [数据对象]
+			 */
+			addCart(item) {
+				this.$emit("addCart", item);
+			},
+
+			/**
+			 * 主按钮点击事件
+			 * @param {object} item [数据对象]
+			 */
+			primary(item) {
+				this.$emit("primary", item);
+			}
+        },
+        mounted() {
+            
+            // 下一周期执行
+            this.$nextTick(() => {
+
+                // 深度拷贝数组
+                this.$set(this, 'listsClone', this.lists.slice(0)); 
+
+                // 检查配置选项
+                let minCount = (this.options && this.options.minCount && this.options.minCount > 0) ? this.options.minCount : 5;
+
+                // 判断列表项目是否 >= 5项，如果不足，不全列表项
+                while(true) {
+
+                    if (this.listsClone && this.listsClone.length >= minCount) {
+                        break;
+                    }
+
+                    // 向尾部追加数据（克隆数据，prop数据不能追加数组)
+                    this.$set(this, 'listsClone', [...this.listsClone, ...this.listsClone]);
+                }
+
+                // 下一周期执行
+                this.$nextTick(() => {
+
+                    // 获取item宽度
+                    let itemWidth = this.$refs.items[0].clientWidth;
+
+                    // 判断是否获取到item宽度
+                    if (itemWidth) {
+
+                        // 延时2秒再开始滚动
+                        setTimeout(() => {
+                            
+                            // 跑马灯无限循环移动函数
+                            this.move(itemWidth, this.$refs.marqueesBox);
+                        }, 2000);
+                    }
+                });
+            });
+        }
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang='less' scoped>
+    @import "marqueeCom";
+</style>
 \ No newline at end of file
@@ -122,6 +122,11 @@
                         width: 710px;
                     }
                 }
+                /deep/.marquee-box {
+                    > .box {
+                        width: 710px;
+                    }
+                }
             }
             &.sub-banner-box {
                 // width: 100%;
@@ -41,8 +41,6 @@
                 </icon-swiper-box>
             </div>
  
-            <!-- 折扣专区 -->
-
             <!-- 折扣专区/积分商城 -->
             <div class="section-col-2" v-if="showIntegral && pointsLists && pointsLists.length">
  
@@ -150,6 +148,7 @@
                 </div>
             </div>
  
+            <!-- 折扣专区 -->
             <div class="section shop-list" v-else-if="discountLists && discountLists.length">
  
                 <!-- 标题 -->
@@ -253,10 +252,24 @@
             <div class="section hot-box" ref="hotBox" v-if="sales && sales.length" @click="toHotSaleList">
  
                 <!-- 商品样式 2 滑动 -->
-                <horiz-list class="components-box"
+                <!-- <horiz-list class="components-box"
                     :lists="sales"
                     com="10"
-                    pid="1">
+                    pid="1"> -->
+
+                    <!-- 标题 -->
+                    <!-- <text-bg-title-com slot="title-box"
+                        :titles="{
+                            bg: 'static/img/text_bg_title_bg_5.png',
+                            more: true
+                        }">
+                    </text-bg-title-com>
+                </horiz-list> -->
+
+                <!-- 热销商品自动滚动 -->
+                <marquee-box class="marquee-box"
+                    :lists="sales"
+                    :options="marqueeOptions">
  
                     <!-- 标题 -->
                     <text-bg-title-com slot="title-box"
@@ -265,7 +278,7 @@
                             more: true
                         }">
                     </text-bg-title-com>
-                </horiz-list>
+                </marquee-box>
             </div>
  
             <!-- 猜你喜欢 -->
@@ -335,6 +348,7 @@
     import iconSwiperBox from "@/components/iconSwiperBox/iconSwiperBox";
     import textBgTitleCom from "@/components/textBgTitleCom/textBgTitleCom";
     import countDownCom from "@/components/countDownCom/countDownCom";
+    import marqueeBox from '@/components/marqueeBox/marqueeBox';
     import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
     import goodsItem10 from "@/components/goodsItem_10/goodsItem_10";
     import iconsCom from "@/components/iconsCom/iconsCom";
@@ -369,6 +383,10 @@
                 quality: null,                  // 品质优选
                 salesOptions: null,             // 热销排行选项
                 sales: null,                    // 热销排行数据
+                marqueeOptions: {               // 无限滚动配置选项
+                    minCount: 5,                // 初始化最小项目总数量
+                    timer: 30                   // 轮训时间
+                },
                 showSearch: false,              // 是否显示搜索，默认不显示
                 showNavs: false,                // 是否显示其它频道跳转，默认不显示
                 showIntegral: false,            // 是否显示积分商城模块，默认不显示
@@ -429,6 +447,7 @@
             iconSwiperBox,
             textBgTitleCom,
             countDownCom,
+            marqueeBox,
             goodsItem2,
             goodsItem10,
             iconsCom,
@@ -437,7 +456,7 @@
             moreCom,
             textTitleBox,
             columnListBox,
-            gotoTop
+            gotoTop,
         },
         created() {