网站首页开发-3图标区域

1.轮播图 计算分页

在图标分页区域加入轮播图效果，一个页面显示8个图标，超出部分被放到下一页展示。
在computed属性中计算分页:

computed:{
        pages() {
            const pages=[]
            this.imgList.forEach((item,index) => {
                // 数据展示在轮播图的第几页
                const page = Math.floor(index/8)
                if(!pages[page]){
                    pages[page]=[]
                }
                // pages扩展为二维数组
                pages[page].push(item)
            }) 
            return pages
        }
    }

computed一般只用getter，上面就是getter的默认形式，在调用computed中函数时，对应的getter方法会被自动调用。

面试常问：computed和watch区别

Computed特点：
需要主动调用，具有缓存能力只有数据再次改变才会重新渲染，
否则就会直接拿取缓存中的数据。
Watch特点：
无论在哪只要被绑定数据发生变化Watch就会响应，
这个特点很适合在异步操作时用上。

轮播图效果.gif

2.stylus中函数

超出文字省略.png

区域中文字超出部分省略的写法，由于这部分常用，可以编写成函数保存起来，时候的时候调用函数即可

ellipsis()
    overflow: hidden 
    white-space: nowrap
    text-overflow: ellipsis

调用函数.png