AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:02:43

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:微信小程序小技巧系列《十》左右滑动切换页面,文本溢出
相关的资讯,希望对您有帮助。

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

本系列为小技巧或有用的知识点聚合,你可以在相关文章内看更多本系列文章,也可以在搜索内搜索“小技巧”的文章(不是帖子);一:左右滑动切换页面本文作者:吕周坤,来自授权地址微信小程序的左右滑动触屏事件,主 ...

本系列为小技巧或有用的知识点聚合,你可以在相关文章内看更多本系列文章,也可以在搜索内搜索“小技巧”的文章(不是帖子);

一:左右滑动切换页面

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

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

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

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

二:文本溢出

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

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

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

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

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

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

-webkit-box-orient:vertical。

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


32阅读 | 0评论
你的回应
写文章

7004