一:左右滑動(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)的界面)
-
<view class="container" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
-
// do something
-
</view>
第二步:在js文件中處理左右滑動(dòng)邏輯
-
var touchDot = 0;//觸摸時(shí)的原點(diǎn)
-
var time = 0;// 時(shí)間記錄,用于滑動(dòng)時(shí)且時(shí)間小于1s則執(zhí)行左右滑動(dòng)
-
var interval = "";// 記錄/清理 時(shí)間記錄
-
var nth = 0;// 設(shè)置活動(dòng)菜單的index
-
var nthMax = 5;//活動(dòng)菜單的最大個(gè)數(shù)
-
var tmpFlag = true;// 判斷左右華東超出菜單最大值時(shí)不再執(zhí)行滑動(dòng)事件
-
-
// 觸摸開始事件
-
touchStart:function(e){
-
touchDot = e.touches[0].pageX; // 獲取觸摸時(shí)的原點(diǎn)
-
// 使用js計(jì)時(shí)器記錄時(shí)間
-
interval = setInterval(function(){
-
time++;
-
},100);
-
},
-
// 觸摸移動(dòng)事件
-
touchMove:function(e){
-
var touchMove = e.touches[0].pageX;
-
console.log("touchMove:"+touchMove+" touchDot:"+touchDot+" diff:"+(touchMove - touchDot));
-
// 向左滑動(dòng)
-
if(touchMove - touchDot <= -40 && time < 10){
-
if(tmpFlag && nth < nthMax){ //每次移動(dòng)中且滑動(dòng)時(shí)不超過最大值 只執(zhí)行一次
-
var tmp = this.data.menu.map(function (arr, index) {
-
tmpFlag = false;
-
if(arr.active){ // 當(dāng)前的狀態(tài)更改
-
nth = index;
-
++nth;
-
arr.active = nth > nthMax ? true : false;
-
}
-
if(nth == index){ // 下一個(gè)的狀態(tài)更改
-
arr.active = true;
-
name = arr.value;
-
}
-
return arr;
-
})
-
this.getNews(name); // 獲取新聞列表
-
this.setData({menu : tmp}); // 更新菜單
-
}
-
}
-
// 向右滑動(dòng)
-
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;
-
// 上一個(gè)的狀態(tài)更改
-
if(nth == index){
-
arr.active = true;
-
name = arr.value;
-
}
-
return arr;
-
})
-
this.getNews(name); // 獲取新聞列表
-
this.setData({menu : tmp}); // 更新菜單
-
}
-
}
-
// touchDot = touchMove; //每移動(dòng)一次把上一次的點(diǎn)作為原點(diǎn)(好像沒啥用)
-
},
-
// 觸摸結(jié)束事件
-
touchEnd:function(e){
-
clearInterval(interval); // 清除setInterval
-
time = 0;
-
tmpFlag = true; // 回復(fù)滑動(dòng)事件
-
},
二:文本溢出
作者:@鎏嫣宮守護(hù),來自原文地址
最為一名Android開發(fā)人員,現(xiàn)在無法拖控件寫布局真的是一件很麻煩的事啊,所以css樣式成為了我做項(xiàng)目的最大隱患,遇到的問題可能做前端的人員看到會(huì)覺得很低端,但沒辦法我還是記錄下來吧,多遇到幾次就會(huì)了,廢話不多說,今天遇到的是text一行顯示,多的省略----文本溢出的問題。
如果是一行顯示的時(shí)候,寫在view里的樣式,會(huì)在最后顯示省略號,但要是寫在text組件中設(shè)置這個(gè)樣式的話就是最后多出來的字隱藏了。
-
.textview{
-
overflow: hidden;
-
text-overflow: ellipsis;
-
white-space: nowrap
-
}
當(dāng)然 有單行的省略 就有多行,不過多行的設(shè)置的有點(diǎn)復(fù)雜:
-
.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;
//這是設(shè)置顯示的多少行。
-webkit-box-orient:vertical。
word-break:規(guī)定自動(dòng)換行的處理方法。