1px边框问题 手机像素比较高 是一个2倍屏 3倍屏 虽然设置为 border 1px solid 但实际上有2px 3px;
解决方案 :
border.css css3的缩放来解决 谷歌浏览器 强制12px 怎么做 谷歌浏览器能出来10px 8px css3的缩放来解决
300毫秒点击延迟问题:
click事件延迟300ms执行
默认显示的图片是第四张图片?
当swiper加载的时候 list是空数组 还没ajax获取数据。swiper是通过空数组创建的,当ajax获取到数据后,在存放到数组,所以会显示数组中的最后一张。
解决的办法:
swiper的创建由完整数据创建 而不是由空数组创建 。 v-for v-if写一起 报错
v-if=“list.length”
不是很优雅 尽量避免逻辑性代码
v-if=“showSwiper”
computed : {
showSwiper () {
return this.list.length;
}
}
小细节:
json数据中的图片地址 宽*高 不同 需要调节
padding-bottom : 37.09%
图标区–九宫格区会自动滚动 不是要的效果
给
data () {
swiperOption : {
autoplay : false
}
}
兄弟组件联动
输入关键字 搜索内容列表显示出来
但是删除关键字后 内容还在
//搜索不存在或搜索后删除搜索关键字后
if (!this.keyword) {
this.list = []
return
}
输入关键字 如果没有匹配项 需要提示
- 没有找到匹配数据
但是如果搜到有数据内容在 在数据列表后边还是提示没有找到匹配数据 list长度为0才显示这个提示内容
- 没有找到匹配数据
输入关键字后选择的内容后把列表组件的内容覆盖掉
需要做到无关键字显示下边的列表组件(List.vue) 有关键字显示搜索的内容优化 html区尽量避免逻辑
computed:{
hasNoData(){
return !this.list.length
}
},- 小细节 点击热门城市时、字符列表选择时、搜索选择时, 不仅城市地方显示点选城市 而且要返回首页显示 需使用路由 路由跳转两种方式: 标签跳转 a标签跳转 router-link 方式 to="/"
js跳转–编程式路由
$router.push()