vue尚品汇-楼层Floor组件 - 个人学习记录

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (260)

Mysql (59)

DedeCms (33)

jQuery (74)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

打开边栏(ESC) 关闭边栏(ESC)

vue尚品汇-楼层Floor组件

一，mock模拟数据

from clipboard

1，mockjs模拟数据

[
  {
      "id": "001",
      "name": "家用电器",
      "keywords": [
          "节能补贴",
          "4K电视",
          "空气净化器",
          "IH电饭煲",
          "滚筒洗衣机",
          "电热水器"
      ],
      "imgUrl": "/images/floor-1-1.png",
      "navList": [
          {
              "url": "#",
              "text": "热门"
          },
          {
              "url": "#",
              "text": "大家电"
          },
          {
              "url": "#",
              "text": "生活电器"
          },
          {
              "url": "#",
              "text": "厨房电器"
          },
          {
              "url": "#",
              "text": "应季电器"
          },
          {
              "url": "#",
              "text": "空气/净水"
          },
          {
              "url": "#",
              "text": "高端电器"
          }
      ],
      "carouselList": [
          {
              "id": "0011",
              "imgUrl": "/images/floor-1-b01.png"
          },
          {
              "id": "0012",
              "imgUrl": "/images/floor-1-b02.png"
          },
          {
              "id": "0013",
              "imgUrl": "/images/floor-1-b03.png"
          }
      ],
      "recommendList": [
          "/images/floor-1-2.png",
          "/images/floor-1-3.png",
          "/images/floor-1-5.png",
          "/images/floor-1-6.png"
      ],
      "bigImg": "/images/floor-1-4.png"
  },
  {
      "id": "002",
      "name": "手机通讯",
      "keywords": [
          "节能补贴2",
          "4K电视2",
          "空气净化器2",
          "IH电饭煲2",
          "滚筒洗衣机2",
          "电热水器2"
      ],
      "imgUrl": "/images/floor-1-1.png",
      "navList": [
          {
              "url": "#",
              "text": "热门2"
          },
          {
              "url": "#",
              "text": "大家电2"
          },
          {
              "url": "#",
              "text": "生活电器2"
          },
          {
              "url": "#",
              "text": "厨房电器2"
          },
          {
              "url": "#",
              "text": "应季电器2"
          },
          {
              "url": "#",
              "text": "空气/净水2"
          },
          {
              "url": "#",
              "text": "高端电器2"
          }
      ],
      "carouselList": [
          {
              "id": "0011",
              "imgUrl": "/images/floor-1-b01.png"
          },
          {
              "id": "0012",
              "imgUrl": "/images/floor-1-b02.png"
          },
          {
              "id": "0013",
              "imgUrl": "/images/floor-1-b03.png"
          }
      ],
      "recommendList": [
          "/images/floor-1-2.png",
          "/images/floor-1-3.png",
          "/images/floor-1-5.png",
          "/images/floor-1-6.png"
      ],
      "bigImg": "/images/floor-1-4.png"
  }
]

2，mockServe.js

import Mock  from 'mockjs'
//webpack默认对外暴露：json、图片
import banner from './banner.json'
import floor from './floor.json'

//mock数据：第一个参数请求地址、第二个参：请求数据
Mock.mock("/mock/banner",{code:200,data:banner})
Mock.mock("/mock/floor",{code:200,data:floor})

二，请求数据

1，Home组件请求数据Home/index.vue

<!-- 楼层，父子组件传递数据props -->
<Floor v-for="floor in floorList" :key="floor.id" :list="floor"/>

<script>
import {mapState} from 'vuex'

import ListContainer from '@/pages/Home/ListContainer'
import TodayRecommend from '@/pages/Home/TodayRecommend'
import Rank from '@/pages/Home/Rank'
import Like from '@/pages/Home/Like'
import Floor from '@/pages/Home/Floor'
import Brand from '@/pages/Home/Brand'

export default {
  name:'Home',
  components:{
    ListContainer,TodayRecommend,Rank,Like,Floor,Brand
  },
  computed:{
    ...mapState({
			floorList:(state)=>{
				return state.home.floorList
			}
		})
  },
  mounted(){
    // 派发actions：通过Vuex发起ajax请求，将数据存储在仓库中
		this.$store.dispatch('getFloorList')
  }
}
</script>

2,vuex仓库store,获取存储数据src\store\home\index.js

import {reqCategoryList,reqBannerList,reqFloorList} from '@/api'

const state = {
  categoryList:[],
  bannerList:[],
  floorList:[]
}
const mutations = {
  CATEGORYLIST(state,categoryList){
    state.categoryList = categoryList
  },
  GETBANNERLIST(state,bannerList){
    state.bannerList = bannerList
  },
  GETFLOORLIST(state,floorList){
    state.floorList = floorList
  }
}
const actions = {
  // 产品分类
  async categoryList({commit}){
    let result = await reqCategoryList()
    if(result.code == 200){
      commit('CATEGORYLIST',result.data)
    }
  },
  // 轮播图
  async getBannerList({commit}){
    let result = await reqBannerList()
    if(result.code == 200){
      commit('GETBANNERLIST',result.data)
    }
  },
  // 楼层
  async getFloorList({commit}){
    let result = await reqFloorList()
    if(result.code == 200){
      commit('GETFLOORLIST',result.data)
    }
  }
}
const getters = {}

export default {
  state,
  mutations,
  actions,
  getters
}

3，Floor组件

<script>
import Swiper from 'swiper'

export default {
  name:'Floor',
	props:['list'],
	mounted(){
		// 子组件Floor加载的时候，已经有数据list了，所以不需要像ListContainer组件那样调用this.$nextTick
		var mySwiper = new Swiper(this.$refs.floorSwiper, {
			loop: true, // 循环模式选项
			autoplay:true,//等同于以下设置
			// 如果需要分页器
			pagination: {
				el: '.swiper-pagination',
				clickable: true
			},
			// 如果需要前进后退按钮
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
		})
	}
}
</script>

Floor组件html代码

<template>
  <div class="floor">
			<div class="py-container">
				<div class="title clearfix">
					<h3 class="fl">{{list.name}}</h3>
					<div class="fr">
						<ul class="nav-tabs clearfix">
							<li :class="{active:index == 0 ? true : false}" v-for="(nav,index) in list.navList" :key="index">
								<a :href="'#tab'+index" data-toggle="tab">{{nav.text}}</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="tab-content">
					<div class="tab-pane">
						<div class="floor-1">
							<div class="blockgary">
								<ul class="jd-list">
									<li v-for="(keyword,index) in list.keywords" :key="index">{{keyword}}</li>
								</ul>
								<img :src="list.imgUrl" />
							</div>
							<div class="floorBanner">
								<div class="swiper-container" id="floor1Swiper" ref="floorSwiper">
									<div class="swiper-wrapper">
										<div class="swiper-slide" v-for="carousel in list.carouselList" :key="carousel.id">
											<img :src="carousel.imgUrl">
										</div>
									</div>
									<!-- 如果需要分页器 -->
									<div class="swiper-pagination"></div>

									<!-- 如果需要导航按钮 -->
									<div class="swiper-button-prev"></div>
									<div class="swiper-button-next"></div>
								</div>
							</div>
							<div class="split">
								<span class="floor-x-line"></span>
								<div class="floor-conver-pit">
									<img :src="list.recommendList[0]" />
								</div>
								<div class="floor-conver-pit">
									<img :src="list.recommendList[1]" />
								</div>
							</div>
							<div class="split center">
								<img :src="list.bigImg" />
							</div>
							<div class="split">
								<span class="floor-x-line"></span>
								<div class="floor-conver-pit">
									<img :src="list.recommendList[2]" />
								</div>
								<div class="floor-conver-pit">
									<img :src="list.recommendList[3]" />
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
</template>

赏

前一篇

vue尚品汇-轮播图，mockjs模拟数据

后一篇

“最难不过坚持”

本人承接扒站仿站，php网站维护，病毒查杀，网站编辑，网站改版，html制作

vue尚品汇-轮播图，mockjs模拟数据

vue尚品汇-carousel轮播图全局组件