vue尚品汇-楼层Floor组件
taotaoit Vue 2022-12-15 701 0
关于本站

“最难不过坚持”

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

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

6281093 2594 39
最新评论
https://jueru.net/
评 留言
:weixiao:
评 留言
:shuijiao: :weiqu: :zhenbang: :leng:
评 留言
:yiwen: :yiwen: :yiwen: :yiwen:
评 EasySass: could not generate CSS file. See Output panel for details.
这个业务逻辑多少都有点奇怪了,阅读浏览次数增值在新闻详情页的控制器方法里setInc,这怎么还写进模型事件里了。如果非要用onAfterRead也可以,把新闻文章的内容单独分出来一个news_content表,然后把它和news做关联,然后给news_content表的onAfterRead事件做增值处理,这样点进新闻页内查询到文章内容时才会触发它。
评 TP6模型事件-查询后onAfterRead不好用
文章标签更多
ThinkPHP (254)
Mysql (58)
DedeCms (33)
jQuery (67)
证件照 (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>

版权声明:本站原创文章,允许自由转载。

相关推荐
接口返回request failed with status code 500错误
Vue | 2023-02-20 2569
接口返回request failed with status code 500错误 登录界面,验证账号密码成功,但是返回500错误 可能原因:linux服务器,用tp5搭建的后台及接口,会生成一部分缓存文件,但是linux默认没有权限创建数据,所以,只要在缓存文件夹runtime添加写的权限即可
vue项目npm run serve默认浏览器打开
Vue | 2022-11-16 1840
1、在vue项目中,输入命令行  npm run serve   浏览器实现自动打开功能,需要添加 在配置文件(package.json)中添加 --open 2、浏览器自动打开后,可能会出现网址0.0.0.0:8080页面错误,见图 3、解决方法: 在--open后面再加上--...
评论:0条
评论加载中...
发表评论