一：左右滑動(dòng)切換頁面

微信小程序的左右滑動(dòng)觸屏事件，主要有三個(gè)事件：touchstart，touchmove，touchend。 
這三個(gè)事件最重要的屬性是pageX和pageY，表示X，Y坐標(biāo)。 
touchstart在觸摸開始時(shí)觸發(fā)事件; 
touchend在觸摸結(jié)束時(shí)觸發(fā)事件; 
touchmove觸摸的過程中不斷激發(fā)這個(gè)事件; 
這三個(gè)事件都有一個(gè)timeStamp的屬性，查看timeStamp屬性，可以看到順序是touchstart => touchmove=> touchmove => ··· =>touchmove =>touchend。

第一步：在wxml文件中綁定事件(需要左右滑動(dòng)的界面)

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

第二步：在js文件中處理左右滑動(dòng)邏輯

1. var touchDot = 0;//觸摸時(shí)的原點(diǎn)
2. var time = 0;// 時(shí)間記錄，用于滑動(dòng)時(shí)且時(shí)間小于1s則執(zhí)行左右滑動(dòng)
3. var interval = "";// 記錄/清理 時(shí)間記錄
4. var nth = 0;// 設(shè)置活動(dòng)菜單的index
5. var nthMax = 5;//活動(dòng)菜單的最大個(gè)數(shù)
6. var tmpFlag = true;// 判斷左右華東超出菜單最大值時(shí)不再執(zhí)行滑動(dòng)事件
7.  
8. // 觸摸開始事件
9. touchStart:function(e){
10. touchDot = e.touches[0].pageX; // 獲取觸摸時(shí)的原點(diǎn)
11. // 使用js計(jì)時(shí)器記錄時(shí)間
12. interval = setInterval(function(){
13. time++;
14. },100);
15. },
16. // 觸摸移動(dòng)事件
17. touchMove:function(e){
18. var touchMove = e.touches[0].pageX;
19. console.log("touchMove:"+touchMove+" touchDot:"+touchDot+" diff:"+(touchMove - touchDot));
20. // 向左滑動(dòng)
21. if(touchMove - touchDot <= -40 && time < 10){
22. if(tmpFlag && nth < nthMax){ //每次移動(dòng)中且滑動(dòng)時(shí)不超過最大值 只執(zhí)行一次
23. var tmp = this.data.menu.map(function (arr, index) {
24. tmpFlag = false;
25. if(arr.active){ // 當(dāng)前的狀態(tài)更改
26. nth = index;
27. ++nth;
28. arr.active = nth > nthMax ? true : false;
29. }
30. if(nth == index){ // 下一個(gè)的狀態(tài)更改
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. // 向右滑動(dòng)
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. // 上一個(gè)的狀態(tài)更改
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; //每移動(dòng)一次把上一次的點(diǎn)作為原點(diǎn)（好像沒啥用）
59. },
60. // 觸摸結(jié)束事件
61. touchEnd:function(e){
62. clearInterval(interval); // 清除setInterval
63. time = 0;
64. tmpFlag = true; // 回復(fù)滑動(dòng)事件
65. },

二：文本溢出

作者：@鎏嫣宮守護(hù)，來自原文地址  最為一名Android開發(fā)人員，現(xiàn)在無法拖控件寫布局真的是一件很麻煩的事啊,所以css樣式成為了我做項(xiàng)目的最大隱患，遇到的問題可能做前端的人員看到會(huì)覺得很低端，但沒辦法我還是記錄下來吧，多遇到幾次就會(huì)了，廢話不多說，今天遇到的是text一行顯示，多的省略----文本溢出的問題。

如果是一行顯示的時(shí)候，寫在view里的樣式，會(huì)在最后顯示省略號，但要是寫在text組件中設(shè)置這個(gè)樣式的話就是最后多出來的字隱藏了。

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

當(dāng)然 有單行的省略 就有多行，不過多行的設(shè)置的有點(diǎn)復(fù)雜：

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;  //這是設(shè)置顯示的多少行。

-webkit-box-orient：vertical。

word-break：規(guī)定自動(dòng)換行的處理方法。