解決方法
data內新增這兩個值
新增touchstart和touchend方法手動寫滑動效果
touchstart(e) ,
touchend(e)
//距離太短時不滾動
let dom = this.$refs.editor.$el.getelementsbyclassname("ql-editor")[0],
maxheight = math.max(0, dom.scrollheight - dom.clientheight), //最大高度範圍
tempdata = this.scrolltop + (distance >= 0 ? -60 : 60); //計算應該高度資料
if (tempdata >= maxheight) else if (tempdata <= 0) else
}此時滑動效果出現。但是滑動出不流暢。
本想著寫動畫過渡效果。但是。這個滑動是用dom.scrolltop屬性做的。該屬性不屬於css屬性無法使用css過渡動畫
所以寫了乙個js方法。
/*** 動畫垂直滾動到頁面指定位置
* @param dom element物件
* @param currenty 當前位置
* @param targety 目標位置
*/export function scrollanimation(dom, currenty, targety) else
}, 1);
}重新呼叫
touchend(e)
//距離太短時不滾動
let dom = this.$refs.editor.$el.getelementsbyclassname("ql-editor")[0],
maxheight = math.max(0, dom.scrollheight - dom.clientheight), //最大高度範圍
tempdata = this.scrolltop + (distance >= 0 ? -60 : 60); //計算應該高度資料
if (tempdata >= maxheight) else if (tempdata <= 0) else
}。備註一下：
這個問題本來打算用transform：translatey(y)屬性來寫的，實際上也做了。
但是在做了之後發現
這裡選中的元素是紅框下面的元素。在做偏移的時候整個元素偏移。文件沒顯示完全但是下方確有一大塊空白。當時也沒截圖。記錄一下自己踩得坑。
仿微信swipebacklayout側滑介面
1 新增依賴 compile me.imid.swipebacklayout.lib library 1.0.0 2 基類activity繼承swipebackactivity baseactivity extends swipebackactivity3 不需要右滑的activity在oncrea...
微信小程式側滑刪除
直接上乾貨吧 wxml 刪除wxss view,label,textarea,input hd con hd con listitem hd con list hd con listitem.active list hd con list info hd con list info toph hd ...
微信小程式左滑效果
container touch item data index bindtouchstart touchstart bindtouchmove touchmove wx for wx key content del catchtap del data index 刪除 複製 touch item c...