swiper

1、做成一个组件： src\components\solution.vue <template> <div class="solutions"> <div class="main_view"> <h1 class="title">{{title}}</h1> <div class="solutions_swiper"> <img src="../assets/imgs/direction.png" v-if="swiperIndex === 0" class="left" /> <img src="../assets/imgs/direction_active2.png" class="left" v-else @click.stop="changeIndex('left')" /> <img src="../assets/imgs/direction.png" v-if="swiperIndex === 2" class="right" /> <img src="../assets/imgs/direction_active2.png" class="right" v-else @click.stop="changeIndex('right')" /> <div class="swiper_all"> <div class="swiper_content"> <div class

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 一、背景 年底很多移动产品都会推出自己的年度账单，每年都会引起大众媒体的关注。今年有幸参与了宜信财富APP年度账单的开发，本文将带大家探索宜信财富年度账单背后的技术架构和研发逻辑，希望可以给大家带来一些思路上的启发。 二、前端整体架构和执行流程 宜信财富年度账单前端架构所采用的技术栈包括： 前端页面是用H5制作； 数据加载进度百分比，技术用到swiper插件和一些CSS3动效； 海报生成用到了canvas图片合成，把海报背景和二维码合二为一。 为了完成MGM的追踪，在二维码中嵌入M1信息。 三、数据来源和数据处理 本次年度账单涉及客户维度、销售维度、客户标签等数据，其中客户维度包括活动参与、文章、视频浏览等数据。这部分数据的整合来源于数据中台的主题数据。以下是数据中台的架构图： ODS：数据来源层，存放从业务系统抽取过来的数据，业务系统中的原始数据经过抽取、洗净、传输装入本层。这层数据接近原始数据，却不等同原始数据，数据装入的时候进行了去重、去噪、表命名、字段命名等一系列规范操作。 DW：数据仓库层，该层是数据仓库的主体，将ODS层的数据按照主题建立数据模型，是为企业所有级别的决策制定过程，提供所有类型数据支持的战略集合，是一个包含所有主题的通用的集合。 DM：数据集市层

Swiper是很常用的库，用于实现触摸滑动效果，为了让Swiper生效，需要执行类似下面的代码(摘自Swiper官方示例) var mySwiper = new Swiper('.swiper-container', { autoplay: true,//可选选项，自动滑动 }) 而该代码的执行时机必须在DOM渲染完成之后，因此Swiper的官方文档要求在window.onload或$( document).ready( )（使用JQuery或Zepto时）调用。 但显然，这只适用于静态页面。 如果Swiper中的数据是动态渲染的，且可能会通过Ajax请求获得最新的值而不断变化，那我们在什么时机去调用呢？ 是不是数据被修改了就可以调用呢？因为Vue.js的双向绑定特性，数据被修改页面就会被重新渲染。 答案是否定的。 可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then 、 MutationObserver

jquery文档准备的三种写法： $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jquery 选择器 基本选择器 $('*') / $('.div') / $('div') / $('#first') / 多项选择器 $('#first, div, .second') 层级选择器 $('aside summary') //aside的子元素summary $('aside > details') //aside的直接子元素details $('summary + ul') //summary相邻的下一个兄弟元素ul $('summary ~ ul') //summary之后的所有兄弟元素ul 属性选择器 $('[class]') $('[class=tool]') $('[class!=tool]') //class不是tool $('[class^=tool_]') //tool_开头 $('[class$=vs]') // vs结束 $('[class*=vs]') //含有vs $('[type][src]') $('[class][class*=lang][class$=y]') 过滤器 $('details > p:first-child') $(

不同于传统的 PC Web 或者是移动 WEB，在腾讯视频客厅盒子端，接大屏显示器（电视）下，许多能流畅运行于 PC 端、移动端的 Web 动画，受限于硬件水平，在盒子端的表现的往往不尽如人意。 基于此，对于 Web 动画的性能问题，仅仅停留在感觉已经优化的OK之上，是不够的，想要在盒子端跑出高性能接近 60 FPS 的流畅动画，就必须要刨根问底，深挖每一处可以提升的方法。 流畅动画的标准 理论上说，FPS 越高，动画会越流畅，目前大多数设备的屏幕刷新率为 60 次/秒，所以通常来讲 FPS 为 60frame/s 时动画效果最好，也就是每帧的消耗时间为 16.67ms。 直观感受，不同帧率的体验 帧率能够达到 50 ～ 60 FPS 的动画将会相当流畅，让人倍感舒适； 帧率在 30 ～ 50 FPS 之间的动画，因各人敏感程度不同，舒适度因人而异； 帧率在 30 FPS 以下的动画，让人感觉到明显的卡顿和不适感； 帧率波动很大的动画，亦会使人感觉到卡顿。 盒子端动画优化 在腾讯视频客厅盒子端，Web 动画未进行优化之前，一些复杂动画的帧率仅有 10 ~ 30 FPS，卡顿感非常明显，带来很不好的用户体验。 而进行优化之后，能将 10 ~ 30 FPS的动画优化至 30 ~ 60 FPS，虽然不算优化到最完美，但是当前盒子硬件的条件下，已经算是非常大的进步。 盒子端 Web

1、利用swiper组件实现滑动选项卡 出现的问题:swiper限制高度，默认是150px;ios系统上下滑动会有卡顿 解决办法： 在swiper子元素swiper - item中使用 < scroll - view scroll - y = "true" style = "height:{{winHeight}}rpx" > //【高度必须设置】 wxss设置：swiper { display : flex ; height : 100 % ; } swiper - item { height : 100 % ; overflow : scroll ; overflow - x : hidden ; } 1 2 3 4 5 6 7 8 9 10 11 12 2、阻止遮罩层下的页面滚动 只需要在遮罩层上加上catchtouchmove = 'ture' 需要注意的是：因模拟器无touch事件，需在真机上测试 例如： < view class = 'mask' catchtouchmove = 'ture' > < / view > 1 2 3 4 3、微信小程序 image图片组件实现宽度固定 高度自适应 < image class = "empty-icon" src = "/pages/image/list-emptyx2.png" mode = "widthFix" > <

这个问题困扰了本人好几天，调样式调的头疼，最后同组的老大给我指点迷津，其实不必要每个swiper容器都要将宽高定义，但是swiper-slide需要一个高，里面的内容可以自己更换，老大的一句其实很简单，总能让人如醍醐灌顶一样，恍然大悟，或许这就是经验的力量吧。 下面进入正题： 参考swiper官方文档的示例进行更改，将html换到vue中即可， 代码如下： template中定义好数据,这里就用静态页面代替了： <template> <div> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8<