图片列表

图片分享按钮改造

1. 新建PhotoList 组件,导入路由组件

import PhotoList from './components/photos/PhotoList.vue'

{path:'/home/photolist',component:PhotoList}

2. 绘制图片列表组件页面结构
   

   

3. 滑动条无法滑动的问题在PhotoList.vue中操作,导入js文件

4. 调用官方提供 的方式去初始化

mui('.mui-scroll-wrapper').scroll({
    deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});

5. 报错：Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
   在严格模式中不被允许
   • mui.js 中使用的几个属性，webpack打包的bundle.js 中默认启用严格模式，所以两者冲突了
     解决方案：将严格模式禁用
6. 移除严格模式：安装插件

npm i babel-plugin-transform-remove-strict-mode  -D

7. 使用这个样式时滑动顶部滑动栏会报错
   • 报错：[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See
   • 原因: 谷歌浏览器为了提升页面滑动的流畅度，由于浏览器必须要在执行事件处理函数之后，才能知道有没有掉用过 preventDefault() ，这就导致了浏览器不能及时响应滚动，略有延迟。所以为了让页面滚动的效果顺滑，从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive: true。浏览器忽略 preventDefault() 就可以第一时间滚动了。
8. 解决方法：
   • 方法一：通过传递 passive 为 false 来明确告诉浏览器：事件处理程序调用 preventDefault 来阻止默认滑动行为。

elem.addEventListener(
  'touchstart',
  fn,
  { passive: false }
);

* 使用全局样式样式去掉  

{ touch-action: pan-y; }

9. 点击下方的导航栏tabbar也会和上面报错相同
   • 原因mui中组件发生冲突
   • 解决方法：将mui-tab-item改为mui-tab-item1并且在样式中也更改通过审查元素找出a标签span标签中含有mui-tab-item类的所有样式并在样式中修改这个类的名称

---

将图片导入页面

1. 跨域请求数据

getPhotoList(){
    this.$http.get("https://api.apiopen.top/musicBroadcasting").then((result) => {

        if(result.body.status===0){
            // this.body.message.unshift({title:'全部',cid:'0'});
            this.cates =result.data;
            this.cates =this.cates.result
        }

    })
}

2. 使用v-for循环将跨域请求得到的图片数据充填主体区域

  

            

                

                    
                        {{item.title}}
                    
                
            

*********8