vue.js三⼗六——从⽆到有完整的项⽬实战3 1. 图⽚分享功能初步改造
1.1 图⽚分享路由改造
将图⽚分享a标签替换为router-link标签
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<router-link to="/home/photolist">
<img src="../../images/menu2.png" alt="" />
<div class="mui-media-body">图⽚分享</div>
</router-link>
</li>
1.2 新建photolist组件模板
photolist.vue
<template>
<div>
<h3>图⽚分享</h3>
</div>
</template>
<script>
export default {
data(){
return {
}
},
created(){
},
methods:{
}
}
</script>
<style lang="scss" scoped>
</style>
1.3 创建路由与组件的关系
1.3.1 导⼊photolist组件
import photolist from './components/photos/photolist.vue';
1.3.2 配置路由地址
{path:'/home/photolist',component:photolist} // 图⽚分享
运⾏，点击图⽚分享，效果如图
2. 制作顶部滑动条
在MUI⽬录下到tab-top-webview-main.html⽂件，打开复制我们所需要的代码，粘贴到photolist.vue⽂件中
<div id="slider" class="mui-slider mui-fullscreen">
<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
推荐
</a>
<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
热点
</a>
<a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
北京
</a>
<a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
社会
</a>
<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
娱乐
</a>
</div>
</div>
</div>
运⾏，如图：
2.1 解决图⽚导航在顶部的问题
通过f12，审查元素，我们发现，该导航⽤到了两个类，⼀个是mui-slider⼀个是mui-fullscreen，很显然，第⼆个类是全屏的类，我们显然是不需要全屏的，所以删除这个类，保存，在查看界⾯，正常了，如图：
2.2 解决图⽚导航不能左右滑动的问题
我们发现，导航只显⽰到了娱乐，⽽我们实际上是还有科技的，这是因为，图⽚导航是⼀个js插件，我们只是引⽤了CSS，没有引⼊js，所以⽆法触发滑动。
2.2.1 引⼊mui.js
在photolist.vue中导⼊mui.js
import mui from '../../lib/mui/js/mui.min.js';
2.2.2 初始化滑动条
// 初始化滑动控件
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数，系数越⼤，滚动速度越慢，滚动距离越⼩，默认值0.0006
mui框架常用组件有哪些});
运⾏，报错了，报错信息为“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 中⽤到了 'caller',
'callee', and 'arguments' 东西，但是， webpack 打包好的 bundle.js 中，默认是启⽤严格模式的，所以，这两者冲突了。
2.2.3 解决webpack打包默认严格模式的问题
1. 安abel插件babel-plugin-transform-remove-strict-mode
npm i babel-plugin-transform-remove-strict-mode -D
2. 配置babel
在 .babelrc 中的plugins节点中配置 "transform-remove-strict-mode"
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime",
["component", [
{
"libraryName": "mint-ui",
"style": true
}
]],
"transform-remove-strict-mode"
]
}
配置完babel之后，发现滑动好了，但是，有很多很多警告，这个警告是⾕歌浏览器为了提⾼画⾯流畅性⽽设置的。
2.2.4 解决滑动警告提⽰问题
可以加上⼀个样式，就可以了
* {
touch-action: pan-y;
}
注意：
1. touch-action⽤于指定某个给定的区域是否允许⽤户操作，以及如何响应⽤户操作（⽐如浏览器⾃带的滑动、缩放等）。具体详细⽤法可以参考css操作⽂档。
2. 属性值 pan-y 表⽰启⽤单指垂直平移⼿势
2.2.5 解决初始化滑动⽆效的问题
我们发现，当我们点击图⽚分享，进⼊photolist的时候，滑动是失效的，需要刷新⼀下才能⽣效。很显然，出现这个问题的原因是滑动效果⽣效的时机不对，我们将滑动效果的代码移动到mounted中
mounted(){
// 初始化滑动控件
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数，系数越⼤，滚动速度越慢，滚动距离越⼩，默认值0.0006
});
}
为什么将代码移到mounted中就可以了，因为mounted是vue的⽣命周期操作元素的最后⼀个⽣命周期函数，mounted是在页⾯已经⽣成好了，DOM结构也已经完成了，这时候，初始化滑动控件才有意义，因为该控件是基于js的，js是操作DOM的，所以只有在DOM加载完成之后，js才能⽣效，从这⾥我们可以得出⼀个结论，如果要操作DOM元素，最早要在mounted函数中
2.2.6 解决tabbar⽆法正常切换组件的问题
我们经过⼀系列的操作，发现滑动条做好了，但是，tabbar组件切换却失效了，这是因为在app.vue中的路由标签中的mui-tab-item类与mui中的冲突引起的，咱们只需要修改⼀下mui-tab-item的名字，在重写样式即可。
我们将mui-tab-item改成mui-tab-item1，并在style中重写mui-tab-item的样式
// 改类名，解决 tabbar 点击⽆法切换的问题
.mui-bar-tab .mui-tab-item1.mui-active {
color: #007aff;
}
.mui-bar-tab .mui-tab-item1 {
display: table-cell;
overflow: hidden;
width: 1%;
height: 50px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
color: #929292;
}
.mui-bar-tab .mui-tab-item1 .mui-icon {
top: 3px;
width: 24px;
height: 24px;
padding-top: 0;
padding-bottom: 0;
}
.mui-bar-tab .mui-tab-item1 .mui-icon~.mui-tab-label {
font-size: 11px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
2.3 渲染列表数据
2.3.1 在data定义列表数组cates
2.3.2 在method中定义⽅法获取后台数据
getAllimgCategory(){
this.$('getimgcategory').then( res => {
ssage.unshift({"id":0,"title":"全部"});
this.cates = ssage;
} );
}
然后在created⽣命周期函数中调⽤
注意：这⾥有⽤到数组的unshift⽅法，该⽅法⽤于在数组的开始位置插⼊元素并返回插⼊之后的数组的长度。
3 渲染数据到页⾯
删除其他的a标签，只保留⼀个，⽤v-for循环赋值
<a :class="['mui-control-item',c.id == 0 ? 'mui-active' : '']"
v-for="c in cates" :key="c.id" @tap="getPhotoListByCateGoryId(c.id)">
{{c.title}}
</a>
注意：这⾥的@tap时间是MUI特有的，可以解决@click事件在⼿机端⽆法切换组件的问题。
3.1 解决样式问题
我们发现，初始化数据之后，所有的a标签都是蓝⾊的，这明显与我们的需求不符，我们希望初始化的时候，全部为蓝⾊，其他的为⿊⾊，所以我们希望让mui-active样式按需动态的加载，怎么实现了，我们可以使⽤vue的样式绑定，通过数组的形式来实现
<a :class="['mui-control-item',c.id == 0 ? 'mui-active' : '']" v-for="c in cates" :key="c.id">
{{c.title}}
</a>
3.2 获取对应分类的图⽚列表数据并渲染页⾯
我们使⽤mintUI提供的Lazyload组件来加载图⽚
3.2.1 在main.js中配置
import { Lazyload } from 'mint-ui';
Vue.use(Lazyload);
3.2.2 在data中定义图⽚列表数据list
3.2.3 在method中定义获取数据⽅法
getPhotoListByCateGoryId(cateId){
// 根据分类id获取图⽚列表
this.$('getimages/' + cateId).then( res => {
this.list = ssage;
console.log(JSON.stringify(this.list));
} );
}
3.3.4 定义getPhotoListByCateGoryId
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论