收藏
回答

scroll-into-view和enable-back-to-top兼容性问题

目前在调试工具上可以正常跳转,但是在所有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 () {},

})


回答关注问题邀请回答
收藏

3 个回答

  • 文惠
    文惠
    2017-12-20

    请问楼主是怎么解决的这个问题,我也遇到类似的,安卓手机测试的scroll-into-view正常滚动到顶部正常,但是iOS就会出现高度异常的问题。蓝色的详情模块设置了高度,模拟器上也正常

    2017-12-20
    有用
    回复
  • 流离
    流离
    2017-06-22

    IOS版本:10.3.2

    2017-06-22
    有用
    回复
  • 流离
    流离
    2017-06-22

    我额外写个button来跳转到最底部的,id都写死,在IOS真机也无法实现.....

    tapClassify: function (e) {

        var id = 'replyId34';

        this.setData({

          replyScrollIntoView: id,

          enableBackToTop: true

        });

        console.log(this.data.replyScrollIntoView)

      }


    2017-06-22
    有用
    回复
登录 后发表内容