一：左右滑動切換頁面

微信小程序的左右滑動觸屏事件，主要有三個事件：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：規定自動換行的處理方法。