小程序模板网

微信小程序小技巧系列《十》左右滑动切换页面,文本溢出

2018-02-06 孙登啸

一:左右滑动切换页面


微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend。 
这三个事件最重要的属性是pageX和pageY,表示X,Y坐标。 
touchstart在触摸开始时触发事件; 
touchend在触摸结束时触发事件; 
touchmove触摸的过程中不断激发这个事件; 
这三个事件都有一个timeStamp的属性,查看timeStamp属性,可以看到顺序是touchstart => touchmove=> touchmove => ··· =>touchmove =>touchend。

第一步:在wxml文件中绑定事件(需要左右滑动的界面)

 

	
  1. <view class="container" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
  2. // do something
  3. </view>

第二步:在js文件中处理左右滑动逻辑

 

	
  1. var touchDot = 0;//触摸时的原点
  2. var time = 0;// 时间记录,用于滑动时且时间小于1s则执行左右滑动
  3. var interval = "";// 记录/清理 时间记录
  4. var nth = 0;// 设置活动菜单的index
  5. var nthMax = 5;//活动菜单的最大个数
  6. var tmpFlag = true;// 判断左右华东超出菜单最大值时不再执行滑动事件
  7.  
  8. // 触摸开始事件
  9. touchStart:function(e){
  10. touchDot = e.touches[0].pageX; // 获取触摸时的原点
  11. // 使用js计时器记录时间
  12. interval = setInterval(function(){
  13. time++;
  14. },100);
  15. },
  16. // 触摸移动事件
  17. touchMove:function(e){
  18. var touchMove = e.touches[0].pageX;
  19. console.log("touchMove:"+touchMove+" touchDot:"+touchDot+" diff:"+(touchMove - touchDot));
  20. // 向左滑动
  21. if(touchMove - touchDot <= -40 && time < 10){
  22. if(tmpFlag && nth < nthMax){ //每次移动中且滑动时不超过最大值 只执行一次
  23. var tmp = this.data.menu.map(function (arr, index) {
  24. tmpFlag = false;
  25. if(arr.active){ // 当前的状态更改
  26. nth = index;
  27. ++nth;
  28. arr.active = nth > nthMax ? true : false;
  29. }
  30. if(nth == index){ // 下一个的状态更改
  31. arr.active = true;
  32. name = arr.value;
  33. }
  34. return arr;
  35. })
  36. this.getNews(name); // 获取新闻列表
  37. this.setData({menu : tmp}); // 更新菜单
  38. }
  39. }
  40. // 向右滑动
  41. if(touchMove - touchDot >= 40 && time < 10){
  42. if(tmpFlag && nth > 0){
  43. nth = --nth < 0 ? 0 : nth;
  44. var tmp = this.data.menu.map(function (arr, index) {
  45. tmpFlag = false;
  46. arr.active = false;
  47. // 上一个的状态更改
  48. if(nth == index){
  49. arr.active = true;
  50. name = arr.value;
  51. }
  52. return arr;
  53. })
  54. this.getNews(name); // 获取新闻列表
  55. this.setData({menu : tmp}); // 更新菜单
  56. }
  57. }
  58. // touchDot = touchMove; //每移动一次把上一次的点作为原点(好像没啥用)
  59. },
  60. // 触摸结束事件
  61. touchEnd:function(e){
  62. clearInterval(interval); // 清除setInterval
  63. time = 0;
  64. tmpFlag = true; // 回复滑动事件
  65. },
 

二:文本溢出

作者:@鎏嫣宫守护,来自原文地址  最为一名Android开发人员,现在无法拖控件写布局真的是一件很麻烦的事啊,所以css样式成为了我做项目的最大隐患,遇到的问题可能做前端的人员看到会觉得很低端,但没办法我还是记录下来吧,多遇到几次就会了,废话不多说,今天遇到的是text一行显示,多的省略----文本溢出的问题。

如果是一行显示的时候,写在view里的样式,会在最后显示省略号,但要是写在text组件中设置这个样式的话就是最后多出来的字隐藏了。

 

	
  1. .textview{
  2. overflow: hidden;
  3. text-overflow: ellipsis;
  4. white-space: nowrap
  5. }

当然 有单行的省略 就有多行,不过多行的设置的有点复杂:

 

	
  1. .textview{
  2.  
  3. display: -webkit-box ;
  4.  
  5. overflow: hidden;
  6.  
  7. text-overflow: ellipsis;
  8.  
  9. word-break: break-all;
  10.  
  11. -webkit-box-orient: vertical;
  12.  
  13. -webkit-line-clamp:2;
  14.  
  15. }

-webkit-line-clamp:2;  //这是设置显示的多少行。

-webkit-box-orient:vertical。

word-break:规定自动换行的处理方法。


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/21666.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询