前言
项目重温到菜单部分,之前使用cube-ui里面的组件去写,靠现成的组件去实现一些功能,想想还是不适用于我这个菜鸟哈哈,现在按照一期的方式去写菜单页面,也就是一步一个代码去实现那些功能。这一篇主要讲better-scroll(界面滚动)
思路:布局(左菜单栏、右商品栏)–> 引入渲染数据(ui) --> 界面滚动
布局
布局都是html和css部分,没啥特别的
<template>
<div class="goods">
<div class="menu-wrapper" id="menu-wrapper">
<ul>
<li v-for="(item, index) in goods" :key="index" class="menu-item">
<span class="text" border-1px>
<span v-show="item.type>0" class="icon">
<support-ico :size="3" :type="item.type"></support-ico>
</span>
{{item.name}}
</span>
</li>
</ul>
</div>
<div class="foods-wrapper" id="foods-wrapper">
<ul>
<li v-for="(item, index) in goods" :key="index" class="food-list">
<h1 class="title">{{item.name}}</h1>
<ul>
<li v-for="(food, food_index) in item.foods" :key="food_index" class="food-item" border-1px>
<div class="icon">
<img :src="food.icon" width="57" height="57">
</div>
<div class="content">
<h2 class="name">{{food.name}}</h2>
<p class="desc">{{food.description}}</p>
<div class="extra">
<span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
</div>
<div class="price">
<span class="now">¥{{food.price}}</span>
<span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
<style lang="stylus" ref="stylesheet/stylus">
@import '~common/stylus/mixin'
.goods
display flex
position absolute
width 100%
top 0
bottom 46px
overflow hidden
.menu-wrapper
flex 0 0 80px
width 80px
background #f3f5f7
.menu-item
display table /*垂直居中*/
height 54px
width 56px
padding 0 12px
line-height 14px
.text
display table-cell
width 56px
vertical-align middle
border-1px(rgba(7, 17, 27, 0.1))
font-size 12px
white-space normal
.foods-wrapper
flex 1
.title
padding-left: 14px;
height 26px
line-height 26px
border-left: 2px solid #d9dde1;
font-size 12px
color rgb(147, 153, 159)
background #f3f5f7
.food-item
display flex
margin 18px
padding-bottom: 15px;
border-1px(rgba(7, 17, 27, 0.1))
&:last-child
border-none()
margin-bottom: 0;
.icon
flex 0 0 57px
margin-right: 10px;
.content
flex: 1;
.name
margin 2px 0 8px 0
height 14px
line-height 14px
font-size 14px
color rgb(7, 17, 27)
.desc, .extra
line-height: 10px;
font-size 10px
color rgb(147, 153, 159)
.desc
line-height 12px
margin-bottom 8px
.extra
.count
margin-right 12px
.price
font-weight 700
line-height: 24px;
.now
margin-right: 8px;
font-size 14px
color rgb(240, 20, 20)
.old
text-decoration line-through
font-size 10px
color rgb(147,153,159)
</style>
数据
获取数据还是用的之前的方法,上一篇讲过了:https://blog.csdn.net/aoteman_web/article/details/110305557
滚动
better-scroll官方文档:https://better-scroll.github.io/docs-v1/doc/zh-hans/*
1、首先安装better-scroll插件
可直接在项目中的package.json文件中选择版本安装
也可以直接输入命令安装
npm install better-scroll --save
2、在所需组件中引用
import BScroll from 'better-scroll'
3、应用
methods: {
_initScroll() {
// 先获取到需要滚动的元素
const menuWrapper = document.getElementById('menu-wrapper')
const foodsWrapper = document.getElementById('foods-wrapper')
const menuScroll = new BScroll(menuWrapper)
const foodsScroll = new BScroll(foodsWrapper)
console.log(menuScroll, foodsScroll)
}
}
4、调用(在获取数据时调用这个方法)
fetch() {
getGoods().then((goods) => {
this.goods = goods
// 调用
this._initScroll()
})
}
注意
这个goods设置了absolute属性,就要在它的上一级设置relative属性,goods的上一级是cube-slide-item。