vue2——关键技术节点

Posted 2020-09-25

商家图片背景模糊

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