目前在调试工具上可以正常跳转,但是在所有IOS真机上无效,华为P9上无效,小米和nuex5上有效
前端代码如下:
<scroll-view scroll-y="true" enable-back-to-top="{{enableBackToTop}}" scroll-top="{{scrollTop}}" style="-webkit-overflow-scrolling: touch;" scroll-into-view="{{replyScrollIntoView}}" scroll-with-animation wx:if="{{replyScrollIntoView != '' && enableBackToTop == true}}">
<!-- 回复列表 -->
<view class="message-list">
<view class="blockquote {{item.IsOther == 1 ? 'other':'my'}}-message" wx:for="{{eventReplyList}}" wx:key="{{item.ReplyId}}" id="replyId{{index}}">
<image class="avatar" src="{{item.Headimgurl}}" />
<view class="cite">
<view>{{item.UserName}}</view>
<view>{{item.CreateDate}}</view>
</view>
<view class="send-message img" wx:if="{{item.ReplyType == 'Image'}}">
<image style="width:{{item.FileInfo.width}}px;height:{{item.FileInfo.height}}px" data-current-img-url="{{item.ReplyDetail}}" catchtap="previewImage" src="{{item.ReplyDetail}}"></image>
</view>
<text class="send-message" wx:if="{{item.ReplyType == 'Text'}}">{{item.ReplyDetail}}</text>
<view class="send-message sound" wx:if="{{item.ReplyType == 'Audio'}}" data-reply-id="{{item.ReplyId}}" data-file-path="{{item.ReplyDetail}}" data-index="{{index}}" catchtap="playVoice">
</view>
</view>
</view>
</scroll-view>
----------------------------------------------------------------------------- 分割线 ----------------------------------------------------------------------------------------------
js代码如下:
Page({
data: {
userInfo: {},
eventInfo: {
ProjectName: '', UserName: '', StageName: '', EventDetailList: [{ EventTypeTemplateName: '', EventDesc: '' }]
},// 详情
eventCreateDate: '',// 创建时间
eventReplyList: [],// 回复列表
eventReplyImageList: [],// 回复中的图片,用于图片预览
replyType: {
Text: true,
Audio: false,
Image: false,
},// 回复类型
eventOptions: {},// 传入的参数
replyScrollIntoView: '',// 回复列表中滚动到指定元素,值应为某子元素id(id不能以数字开头)
scrollTop: 0,
enableBackToTop: false, // 当iOS点击顶部状态栏、安卓双击标题栏时,是否支持滚动条返回顶部
},
//加载页面,获取详情
onLoad: function (options) {
var that = this
var userInfoPromise = new Promise(function (resolve, reject) {
app.getUserInfo(function (userInfo) {
that.setData({
userInfo: userInfo
})
resolve('OK')
})
})
userInfoPromise.then(function (successMessage) {
if (successMessage == 'OK') {
var params = options;
var jsonData = JSON.stringify({
sessionId: app.globalData.sessionId,
eventId: params.eventId,
eventType: params.eventType,
moduleName: params.moduleName,
prePage: 'Page'
});
wx.showLoading({
title: '加载中',
})
wx.request({
url: app.globalData.requestUrl + 'api/Test/GetTestDetail',
contentType: 'application/json',
data: jsonData,
method: 'POST',
header: app.globalData.requestHeader,
success: function (res) {
if (res.statusCode == 200 && res.data.Result.Status == 1) {
if (res.data.Data != null) {
wx.setNavigationBarTitle({
title: res.data.Data.ProjectName,
success: function (res) {
}
})
var handleResult = handleReplyList(res.data.Data.EventReplyList)
that.setData({
eventInfo: res.data.Data,
eventCreateDate: moment(res.data.Data.CreateDate).format('YYYY-MM-DD HH:mm:ss'),
eventReplyList: handleResult.replyList,
eventReplyImageList: handleResult.replyImageList
})
//ps:一开始以为是数据渲染延迟的问题导致无法跳转到指定子元素,就使用延时执行,但即时我设置延时10秒后执行,也无效果
setTimeout(function () {
console.log('replyId' + (that.data.eventReplyList.length - 1))
that.setData({
replyScrollIntoView: 'replyId' + (that.data.eventReplyList.length - 1),
enableBackToTop: true
})
}, 500)
}
else {
wx.showModal({
title: '提示',
content: '暂无数据',
showCancel: false,
success: function (res) {
if (res.confirm) {
}
}
})
}
}
else if (res.statusCode == 401) {
wx.showModal({
title: '提示',
content: '登录已超时',
showCancel: false,
success: function (res) {
if (res.confirm) {
}
}
})
}
else {
wx.showModal({
title: '提示',
content: res.data.Result.Error.Message,
showCancel: false,
success: function (res) {
if (res.confirm) {
}
}
})
}
},
fail: function (res) {
console.log('fail: ', res)
},
complete: function (res) {
wx.hideLoading()
}
})
}
})
},
onShow: function () {},
})
请问楼主是怎么解决的这个问题,我也遇到类似的,安卓手机测试的scroll-into-view正常滚动到顶部正常,但是iOS就会出现高度异常的问题。蓝色的详情模块设置了高度,模拟器上也正常
IOS版本:10.3.2
我额外写个button来跳转到最底部的,id都写死,在IOS真机也无法实现.....
tapClassify: function (e) {
var id = 'replyId34';
this.setData({
replyScrollIntoView: id,
enableBackToTop: true
});
console.log(this.data.replyScrollIntoView)
}