一:左右滑动切换页面
微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend。
这三个事件最重要的属性是pageX和pageY,表示X,Y坐标。
touchstart在触摸开始时触发事件;
touchend在触摸结束时触发事件;
touchmove触摸的过程中不断激发这个事件;
这三个事件都有一个timeStamp的属性,查看timeStamp属性,可以看到顺序是touchstart => touchmove=> touchmove => ··· =>touchmove =>touchend。
第一步:在wxml文件中绑定事件(需要左右滑动的界面)
- <view class="container" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
- // do something
- </view>
第二步:在js文件中处理左右滑动逻辑
- var touchDot = 0;//触摸时的原点
- var time = 0;// 时间记录,用于滑动时且时间小于1s则执行左右滑动
- var interval = "";// 记录/清理 时间记录
- var nth = 0;// 设置活动菜单的index
- var nthMax = 5;//活动菜单的最大个数
- var tmpFlag = true;// 判断左右华东超出菜单最大值时不再执行滑动事件
- // 触摸开始事件
- touchStart:function(e){
- touchDot = e.touches[0].pageX; // 获取触摸时的原点
- // 使用js计时器记录时间
- interval = setInterval(function(){
- time++;
- },100);
- },
- // 触摸移动事件
- touchMove:function(e){
- var touchMove = e.touches[0].pageX;
- console.log("touchMove:"+touchMove+" touchDot:"+touchDot+" diff:"+(touchMove - touchDot));
- // 向左滑动
- if(touchMove - touchDot <= -40 && time < 10){
- if(tmpFlag && nth < nthMax){ //每次移动中且滑动时不超过最大值 只执行一次
- var tmp = this.data.menu.map(function (arr, index) {
- tmpFlag = false;
- if(arr.active){ // 当前的状态更改
- nth = index;
- ++nth;
- arr.active = nth > nthMax ? true : false;
- }
- if(nth == index){ // 下一个的状态更改
- arr.active = true;
- name = arr.value;
- }
- return arr;
- })
- this.getNews(name); // 获取新闻列表
- this.setData({menu : tmp}); // 更新菜单
- }
- }
- // 向右滑动
- if(touchMove - touchDot >= 40 && time < 10){
- if(tmpFlag && nth > 0){
- nth = --nth < 0 ? 0 : nth;
- var tmp = this.data.menu.map(function (arr, index) {
- tmpFlag = false;
- arr.active = false;
- // 上一个的状态更改
- if(nth == index){
- arr.active = true;
- name = arr.value;
- }
- return arr;
- })
- this.getNews(name); // 获取新闻列表
- this.setData({menu : tmp}); // 更新菜单
- }
- }
- // touchDot = touchMove; //每移动一次把上一次的点作为原点(好像没啥用)
- },
- // 触摸结束事件
- touchEnd:function(e){
- clearInterval(interval); // 清除setInterval
- time = 0;
- tmpFlag = true; // 回复滑动事件
- },
二:文本溢出
作者:@鎏嫣宫守护,来自原文地址 最为一名Android开发人员,现在无法拖控件写布局真的是一件很麻烦的事啊,所以css样式成为了我做项目的最大隐患,遇到的问题可能做前端的人员看到会觉得很低端,但没办法我还是记录下来吧,多遇到几次就会了,废话不多说,今天遇到的是text一行显示,多的省略----文本溢出的问题。
如果是一行显示的时候,写在view里的样式,会在最后显示省略号,但要是写在text组件中设置这个样式的话就是最后多出来的字隐藏了。
- .textview{
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap
- }
当然 有单行的省略 就有多行,不过多行的设置的有点复杂:
- .textview{
- display: -webkit-box ;
- overflow: hidden;
- text-overflow: ellipsis;
- word-break: break-all;
- -webkit-box-orient: vertical;
- -webkit-line-clamp:2;
- }
-webkit-line-clamp:2; //这是设置显示的多少行。
-webkit-box-orient:vertical。
word-break:规定自动换行的处理方法。