商家圖片背景模糊
-
將一個新的層（寬高和內容一致） 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 = true;
}
self.sellerList = self.sellerList.concat(temp);
//更新完數據，需要重新刷新一下dom，以便獲取新的高度
self.$refs.myScroller.finishPullToRefresh();
//當前下拉加載結束之后，執行done方法，以便下一次下拉加載正常執行
done();
}, 1500)
}