vue2——關鍵技術節點

商家圖片背景模糊

1. 將一個新的層（寬高和內容一致） class = .background，絕對定位到頭部 0 0 位置。z-index設置-1，讓圖片置於底部

2. 將.background 添加 filter:blur(10px);使其內部img標籤中的圖片模糊

3. 將頭部信息層的背景設置爲 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)
    }