写真の黄色い部分はドラッグした部分です
cssスタイル:
js
// pages/info/info.
let startY= 0;
let moveY = 0;
let distanceY = 0;
Page({
/**
* 页面的初始数据
*/
data: {
"movestyle":"translateY(0);",
"movetime":""
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
movetouchstart:function(ev){
startY = ev.touches[0].clientY;
this.setData({
movetime: ''
})
},
movetouchmove:function(ev){
moveY = ev.touches[0].clientY;
distanceY = moveY - startY;
if(distanceY<=0){
return;
}
if(distanceY>=80){
distanceY = 80;
}
this.setData({
movestyle:`translateY(${distanceY}rpx)`
})
},
movetouchend:function(ev){
this.setData({
movetime: "transform 5s linear;"
})
this.setData({
movestyle: `transform: translateY(0)`
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
ポイントは、パーツだけでスタイルを追加することです
この場合、コードの記述に大きな問題はありません。すべてを追加したい場合、スタイルは機能しません。