part5 城市页面列表开发
1.配置路由
先在router文件夹中,创建一个路由。引入组件
{
path: '/city',
name: 'HelloCity',
component: city,
meta: {
name: 'viewport',
content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
}
2.点击页面跳转
<router-link to="/city">
<div class="right">
{{city}}
<icon-svg icon-class="iconnewPPdaosanjiao" />
</div>
</router-link>
3.引入更高级区块滚动 better-scroll
npm install better-scroll -S <div class="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
<!-- you can put some other DOMs here, it won't affect the scrolling
</div> import BScroll from '@better-scroll/core'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)
4.如果是循环中的ref 赋值的name 那么拿到这个ref的元素 需要用 this.$refs[name][0]
循环产生的ref this.$refs获得的不是一个标准dom元素 而是一个数组
5. 复杂列表布局
要做到一个吸顶效果 并且有弹性上下拉动
// list元素 上设置绝对定位
position:absolute;
top: 0
right 0
left 0
bottom 0
//相对于body 上下左右距离都是0
//然后
overflow: hidden
超出部分就隐藏
就造成无法拉动 吸顶 就top设置距离
//然后解决 页面固定了 如何拉动
//引入 better-scroll
import BScroll from '@better-scroll/core'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)
6.兄弟组件的联动
//借助ref 和 better-scroll
//实现指定元素的跳转
//1.
this.scroll.scrollToElement(dom)
//其中this.scroll 是我们在mounted中注册过的
mounted () {
this.scroll = new BScroll(this.$refs.bscroll)
},
// 2。ref
var element = this.$refs[this.clickList][0]
//注意:⚠️循环得到的ref 是一个数组 需要加【0】
7.字母表的滑动影响页面跳转(兄弟组件的联动)
//用到三个移动端绑定时间函数
@touchstart="touchstart"
@touchmove="touchmove"
@touchend="touchend"
//希望只有在touchstart之后才可以出发touchmove里面的内容
//data里面定义一个 标示 。默认为false
data () {
return {
active: false
}
},
//然后method中定义
touchstart () {
this.active = true
},
touchmove (e) {
if (this.active) {
console.log(e.target)
var scrollY = Math.floor((e.touches[0].clientY - 98 - 82) / 15)
var element = this.cities2[scrollY]
this.$emit('change1', element)
}
},
touchend () {
this.active = false
}
//
其中需要重点关注的知识点
滑动时间event.touches[0].clientY 当前触发时间的元素离顶部的距离
//我们用的方法为计算alphabet的单个字母长度。然后计算滑动的距离。除以字母长度,就知道滑到第几个
//期间还用到watch (为对象,需要监听的是数据对象格式,数据需要已经存在data)
//也有缓存性能 监听数据不改变 它不作用
// computed 其他和watch一样 就是数据不用定义data 一般数据计算都可以放在这里 计算结果需要返回
//计算属性 内置缓存
//当计算属性计算出的结果 依赖的数据不发生改变的情况
计算属性不多余计算,可以提高性能//就算页面重新渲染
8.列表切换性能优化
//函数中有计算固定值的 并且该函数频繁被执行 那么这个计算就多余
// updated 一般有数据变动 放在这个生命周期函数中
因为页面刚加载 通过父组件传过来数据ajax还没有拿到
当传给子组件的数据改变的时候 子组件就会重新渲染 这个时候updated就会被执行
这个时候子组件就完全动态渲染好 这个时候拿数据 就是最新的 而且不溶于
!!要数据一定在拿到ajax数据后再拿
8.2 节流
move移动的频率比较高 我们需要做一个节流
//data中设定一个 timer:null
//然后move时间函数中
if(this.timer) {
clearTimeout(this.timer)
}else {
this.timer = setTimeout(()=>{要做的事情},16)
//延迟16ms 如果16ms中还有滑动 就清除上次
//大大减少move 事件执行频率提高性能
part5 城市页面列表开发的更多相关文章
- 八、VueJs 填坑日记之参数传递及内容页面的开发
我们在上一篇博文中,渲染出来了一个列表,并在列表中使用了router-link标签,标签内的:to就是链接地址,昨天咱们是<router-link :to="'/content/' + ...
- WEB开发框架系列教程 (三)页面功能开发(2)
上一节介绍了,基础资料币别信息的开发,只通过辅助开发工具,创建及资料表,填写 表名,程序就完全好了. 最后也说到,可能我们也会面对另外一些基础资料信息的维护,但是不是简单到只有代码 和名称,可能还有另 ...
- 天气预报API(一):全国城市代码列表(“旧编码”)
说明 2016-12-09 补充 (后来)偶然发现中国天气网已经有城市ID列表的网页... 还发现城市编码有两种,暂且称中国天气网这些编码为旧标准 "旧编码"的特征是 9个字符长度 ...
- iOS:城市级联列表的使用
1.介绍: 现在越来越多的项目都用到了地址,尤其是电商O2O的购物平台,我之前做的教育产品和电商产品都用到了,而实现地址的设置用到的技术就是城市级联列表,即普遍的做法就是自定义选择器控件UIPicke ...
- 项目Splash页面的开发与设计
项目Splash页面的开发与设计 首先建立一个安卓的项目,然后修改manifest.xml文件,修改应用程序的logo和显示名称,效果图如下: 对应的代码如下: 1 <?xml version= ...
- 使用webpack、babel、react、antdesign配置单页面应用开发环境
这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- 关闭open页面时刷新父页面列表
var winObjEI = window.open("/Invoice/InvoiceViewEI?invoiceid=" + data.InvoiceId); ; //关闭op ...
- H5类似易企秀/编辑器/页面制作/开发/生成工具/软件/源码/授权
代码地址如下:http://www.demodashi.com/demo/14960.html 项目简介 H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具. ...
- 【vue】饿了么项目-页面骨架开发
1.页面骨架开发 1.1组件拆分 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没 ...
随机推荐
- MySQL设置各类字符集
一.查看字符集编码: 登录mysql show variables like '%character%'; 二.修改编码: 编辑/etc/my.cnf ,设置后的配置文件如下: [root@node0 ...
- uboot配置和编译过程详解
根据朱有鹏老师讲解整理 一.uboot主Makefile分析 1.uboot version确定(Makefile的24-29行) include/version_autogenerated.h文件是 ...
- 利用python模拟鼠标点击自动完成工作,提升你的工作效率!
没有什么能比学以致用让学习变得更有动力的了. 不知道大家在工作中有没有一些工作需要重复的点击鼠标,因为会影响到财务统计报表的关系,我们每个月底月初都要修改ERP中的单据日期,单据多的时候光修改就能让你 ...
- mysql concat与concat_ws区别
select concat('大','小') as size from 表 查询出结果为:大小 select concat('大',NULL) as size from 表 查询出结果为:null c ...
- java中关键字super
super关键字的作用 java中的super关键字是一个引用变量,用于引用父类对象.关键字“super”以继承的概念出现在类中. 主要用于以下情况:1.调用父类的方法 2.调用父类的变量 3. ...
- HDU - 1087 Super Jumping! Jumping! Jumping!(dp)
题意:从起点依次跳跃带有数字的点直到终点,要求跳跃点上的数字严格递增,问跳跃点的最大数字和. 分析: 1.若之前的点比该点数字小,则可进行状态转移,dp[i] = max(dp[i], dp[j] + ...
- 编码解码:UrlDecode解码及UrlEncode编码的jQuery方法
找了n多方法,终于找到,不容易. C#:Server.UrlEncode(ur) Jquery解码:decodeURIComponent(url); Jquery编码:encodeURICompone ...
- mencoder及ffmpeg的基本命令
前段时间想在ubuntu下对视频进行格式转换,多方查找之后,接触了mencoder与ffmpeg. mencoder mencoder 是一款命令行方式的视频处理软件,是Mplayer自带的编码工具, ...
- centos 7 打开端口
查看防火墙状态 systemctl status firewalld 或者 firewall-cmd --state 临时关闭防火墙测试是否是端口问题 systemctl stop firewalld ...
- mock的使用及取消,node模仿本地请求:为了解决前后端分离,用户后台没写完接口的情况下
借鉴:https://www.jianshu.com/p/dd23a6547114 1.说到这里还有一种是配置node模拟本地请求 (1)node模拟本地请求: 补充一下 [1]首先在根目录下建一个d ...