一:左右滑动切换页面
微信小程序的左右滑动触屏事件,主要有三个事件: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:规定自动换行的处理方法。