vue2——关键技术节点

        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);

        <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>

        //初始化滚动
        _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));
            })
        },

        this.axios.get(‘http://localhost:8080/api/goods‘).then((res) => {
            this.goods = res.data.data;
            this.$nextTick(() => {
                //绑定滚动
                this._initScroll();
                //计算高度数组
                this._countHeight();
            })
        })

        //计算区间高度
        _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);
            }
        },

        this.foodScroll = new Bscroll(this.$refs.goodsWrapper, {
            probeType: 3//可以实时监测滚动的举例
        })

    //监听滚动的举例
    this.foodScroll.on(‘scroll‘, (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y));
    })

        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;
        }

        <div @click="goFood(index)" class="menu-item" :class="{act:index==currentIndex}" v-for="(menu,index) in goods">
            {{menu.name}}
        </div>

    this.menuScroll = new Bscroll(this.$refs.menuWrapper, {
        click: true//允许滚动的元素点击
    })

     @click="goFood(index)"

    //点击menu 滑动到对应的食物
    goFood(index) {
        this.currentIndex = index;
        let go = this.listHeight[index];
        this.foodScroll.scrollTo(0, -go, 100);
    }

    cnpm install vue-scroller --save-dev

    import VueScroller from ‘vue-scroller‘;
    Vue.use(VueScroller)

                                        ref 设置让js可以抓取到滚动框，以便进行resize和没有新数据更新完成的操作
    <scroller :on-infinite="loadMore" ref="myScroller">
        <ul>
            <li v-for="m in list">{{m}}</li>
        </ul>
    </scroller>

    //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)
    }