Просмотр исходного кода

implement scroll but get a little bug

lybenson 8 лет назад
Родитель
Сommit
ec9647799f
3 измененных файлов с 34 добавлено и 31 удалено
  1. 8 8
      src/App.vue
  2. 11 6
      src/components/content/BContent.vue
  3. 15 17
      src/components/nav/BNavSide.vue

+ 8 - 8
src/App.vue

@@ -25,25 +25,25 @@ export default {
     return {
       items: [{
         name: '动画',
-        id: 'b_douga'
+        b_id: 'b_douga'
       }, {
         name: '游戏',
-        id: 'b_game'
+        b_id: 'b_game'
       }, {
         name: '音乐',
-        id: 'b_music'
+        b_id: 'b_music'
       }, {
         name: '舞蹈',
-        id: 'b_dance'
+        b_id: 'b_dance'
       }, {
         name: '科技',
-        id: 'b_technology'
+        b_id: 'b_technology'
       }, {
         name: '生活',
-        id: 'b_life'
+        b_id: 'b_life'
       }, {
         name: '电影',
-        id: 'b_movie'
+        b_id: 'b_movie'
       }]
     }
   },
@@ -78,7 +78,7 @@ export default {
       height 150%
       background-color #000
       opacity .5!important
-      z-index 10005
+      z-index 1000
       top 0px
       left 0px
       transition .2s

+ 11 - 6
src/components/content/BContent.vue

@@ -19,9 +19,9 @@
 			<BLive></BLive>
 		</div>
 		<!-- 各分类具体内容 -->
-		<div class="container-row"  v-for="(row, index) in rows">
-		
+		<div class="container-row"  v-for="(row, index) in rows" :id="getContentRowId(index)">
 			<BContentRow :category="sortKeys[index]" :categoryId="sortIds[index]" :row="row"></BContentRow>
+		}
 		</div>
 	</div>
 </template>
@@ -47,12 +47,17 @@ export default {
 	props: ['items'],
 	mounted() {
 		this.$store.dispatch('getContentRows')
-		console.log(JSON.stringify(this.items[0].name) + '=======')
+		console.log(JSON.stringify(this.items) + '=======')
 	},
 	methods: {
-		// getContentRowId(index) {
-		// 	return `b_${this.items[index].id}`
-		// }
+		getContentRowId(index) {
+			if (index > this.items.length-1) {
+				return '123456'
+			}
+			// console.log(index + '=== ' +this.items[index].b_id)
+			// return '123456'
+			return this.items[index].b_id
+		}
 	},
 	components: {
 		Banner,

+ 15 - 17
src/components/nav/BNavSide.vue

@@ -55,15 +55,6 @@ export default {
 			y: 0  //被拖拽的元素在其相对的元素上的Y坐标上的偏移
 		}
 	},
-	computed: {
-		...mapGetters([
-			'requesting',
-			'error',
-			'rows',
-			'sortKeys',
-			'sortIds'
-		])
-	},
 	props: {
 		options: {
 			type: Object
@@ -78,14 +69,21 @@ export default {
 			}
 		},
 		rows() {
-			console.log(this.sortKeys + 'xxx')
-			if (this.rows) {
-				console.log(this.rows + '----rows存在')
-				this.initData()
+			console.log('rows 变化')
+			if (this.rows && this.rows.length > 0) {
+				console.log('rows存在:' + this.rows[0])
+				this.init()
 			}
 		}
 	},
 	computed: {
+		...mapGetters([
+			'requesting',
+			'error',
+			'rows',
+			'sortKeys',
+			'sortIds'
+		]),
 		//  偏移值
 		offset() {
 			return this.options.offset || 100
@@ -108,8 +106,8 @@ export default {
 		}
 	},
 	mounted() {
-		console.log('0000'+this.sortIds)
-		if (!this.rows) {
+		if (!this.rows || this.rows.length === 0) {
+			console.log('rows不存在')
 			return
 		}
 		this.init()
@@ -134,9 +132,9 @@ export default {
 		initData() {
 			//将this.options.items转化成新的数组this.data
 			this.data = Array.from(this.options.items, (item) => {
-				let element = document.getElementById(item.id)
+				let element = document.getElementById(item.b_id)
 				if (!element) {
-					console.error(`can not find element of name is ${item.id}`)
+					console.error(`can not find element of name is ${item.b_id}`)
 					return
 				}
 				let offsetTop = this.getOffsetTop(element)