首页 > 代码库 > vue2——关键技术节点
vue2——关键技术节点
商家图片背景模糊
-
将一个新的层（宽高和内容一致） class = .background，绝对定位到头部 0 0 位置。z-index设置-1，让图片置于底部
-
将.background 添加 filter:blur(10px);使其内部img标签中的图片模糊
-
将头部信息层的背景设置为 rgba(7,17,27,0.4);黑色半透明
使用express 模拟后台数据接口 修改 build/dev-server.js
var app = express()
//获取模拟的数据
var appData = require(‘../data.json‘);
//将数据分类存储于变量
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;
//定义路由
var apiRoutes = express.Router();
//定义获取商家数据的路由
apiRoutes.get(‘/seller‘, function (req, res) {
res.json({
errno: 0,
data: seller
});
});
//定义获取商品数据的路由
apiRoutes.get(‘/goods‘, function (req, res) {
res.json({
errno: 0,
data: goods
});
});
apiRoutes.get(‘/ratings‘, function (req, res) {
res.json({
errno: 0,
data: ratings
});
});
//使用路由 则访问 /api/seller 获取商家数据
app.use(‘/api‘, apiRoutes);
Bscroll使用
1 让指定区块滚动起来，需要注意，
1 在要滚动数据的外层，整个存储容器的内层，需要加一个div包裹，然后把滚动加给最外层的容器
<div class="menu-wrapper" ref="menuWrapper">//绑定给最外层容器
<div class="" >//该层为实现滚动，特意加的
<div @click="goFood(index)" class="menu-item" :class="{act:index==currentIndex}" v-for="(menu,index) in goods">
{{menu.name}}
</div>
</div>
</div>
2 给外层加 ref="xxx" 目的是为了 使用vue提供的 this.refs.xxx来获取该dom元素
3 给获取到的要加滚动的容器绑定滚动事件
//初始化滚动
_initScroll() { dom 配置参数
this.menuScroll = new Bscroll(this.$refs.menuWrapper, {
click: true//允许滚动的元素点击
})
this.foodScroll = new Bscroll(this.$refs.goodsWrapper, {
probeType: 3//可以实时监测滚动的举例
})
//监听滚动的举例
this.foodScroll.on(‘scroll‘, (pos) => {
this.scrollY = Math.abs(Math.round(pos.y));
})
},
4 数据获取后，由于vue是异步更新dom的，所以原来的容器不能马上改变高度，导致无法滚动，需要让滚动绑定行为，在数据已经填充进dom，容器获得了新的高度之后。所以初始化滚动的行为需要写入 this.$nextTick(()=>{绑定})
this.axios.get(‘http://localhost:8080/api/goods‘).then((res) => {
this.goods = res.data.data;
this.$nextTick(() => {
//绑定滚动
this._initScroll();
//计算高度数组
this._countHeight();
})
})
2 利用滚动获取菜单栏的激活
1 计算出每个版块距离顶部的高度数组
//计算区间高度
_countHeight() {
let lists = this.$refs.goodsWrapper.getElementsByClassName(‘food-list-hook‘);
for (let i = 0; i < lists.length; i++) {
let item = lists[i];
this.listHeight.push(item.offsetTop);
}
},
2 给滚动配置参数 probeType:3 让滚动行为的 pos信息可以被获取
this.foodScroll = new Bscroll(this.$refs.goodsWrapper, {
probeType: 3//可以实时监测滚动的举例
})
3 初始化完成后，紧接着监听滚动，实时获取this.scrollY 的值
//监听滚动的举例
this.foodScroll.on(‘scroll‘, (pos) => {
this.scrollY = Math.abs(Math.round(pos.y));
})
4 根据this.scrollY，利用计算属性获取 index索引，进而可根据索引设置menu激活状态
currentIndex() {
for (let i = 0; i < this.listHeight.length; i++) {
//当前
let height = this.listHeight[i];
//下一个
let next = this.listHeight[i + 1];
if (this.scrollY >= height && this.scrollY < next) {
return i;
}
if (!next) {
return i;
}
}
return 0;
}
5 改变样式
<div @click="goFood(index)" class="menu-item" :class="{act:index==currentIndex}" v-for="(menu,index) in goods">
{{menu.name}}
</div>
3 点击导航menu让食物滚动到对应版块
1 配置参数，让scroll可以被点击
this.menuScroll = new Bscroll(this.$refs.menuWrapper, {
click: true//允许滚动的元素点击
})
2 绑定单击事件获取 索引
@click="goFood(index)"
3 滚动对应位置
//点击menu 滑动到对应的食物
goFood(index) {
this.currentIndex = index;
let go = this.listHeight[index];
this.foodScroll.scrollTo(0, -go, 100);
}
VueScroller 下拉加载更多
1 安装
cnpm install vue-scroller --save-dev
2 引入
import VueScroller from ‘vue-scroller‘;
Vue.use(VueScroller)
3 tempate引入
ref 设置让js可以抓取到滚动框，以便进行resize和没有新数据更新完成的操作
<scroller :on-infinite="loadMore" ref="myScroller">
<ul>
<li v-for="m in list">{{m}}</li>
</ul>
</scroller>
4 script定义方法
//done 加载完之后回调
loadMore(done) {
//如果noData是true，证明没有新数据了，则显示没有新数据字样
if (this.noData) {
setTimeout(() => {
//没有数据了 执行 finishInfinite(2)
this.$refs.myScroller.finishInfinite(2);
})
return;
}
let self = this;
setTimeout(() => {
let total = self.totalList.concat([]);
let start = self.sellerList.length;
let temp = total.splice(start, 2);
console.log(temp, ‘[]‘);
//如果length==0说明没有新数据了，那么把noData属性设置为true
if (temp.length == 0) {
self.noData = http://www.mamicode.com/true;>
vue2——关键技术节点
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。