你想反馈一个 Bug 还是 提一个需求?
scroll-view scroll-left 有bug
如果是 Bug:
* Bug 表现是什么?预期表现是什么?
表现:
需求:实现横向导航切换后该导航定位在中间位置,所以使用scroll-left或者scroll-into-view 来调整导航的位置。
问题:在PC端编辑器里正常,在ios系统下正常,在安卓系统下 scroll-left或者scroll-into-view 失效
1)ios 正常
2)安卓下 失效
安卓版本信息:
* 如何复现?
换了几台安卓手机均无效,ios与编辑器都正常
* 提供一个最简复现 Demo
如果是需求:
* 你希望有什么能力?
* 你需要这个能力的场景是 ?
点击或者切换至该分类下,该分类位置能够移动至屏幕中间位置
以上问题很久了,官方也没给个回复,希望官方能够重视一下,谢谢
你好,问题未复现。请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码示例。
<scroll-view scroll-x="true" class="miniScroll" scroll-left="{{scrollValue}}">
<view class='miniBody' >
<view class="singleMini" wx:for="{{miniMsgDetail}}" wx:key="unique">
<image src="../images/miniProgramerLogo_03.png"/>
<view class="miniProName">{{item.name}}</view>
<view class="miniProType">{{item.type}}</view>
</view>
</view>
</scroll-view>
这种结构的;如果给class='miniBody';加上overflow-x: scroll; scroll-left也将失效
感谢,加了flex就没用了
原来是 scroll-view使用了flex布局导致的,有遇到该问题的朋友可以注意下哦
调试看了下 视图层节点赋值也是正常的
视图层 代码:
<view class="fc-flex nav-list" >
<scroll-view scroll-x="true" class="fc-flex" scroll-left="{{tab_scroll_left}}" scroll-with-animation>
<block wx:for="{{menus.added}}" wx:key="index">
<view class="nav-i {{select_index == index ? 'active' : ''}}" id="nav_{{item.catid}}">
<text wx:if="{{select_index == index}}">{{item.catname}}</text>
<text wx:else catchtap="selectNav" data-index="{{index}}" data-id="{{item.catid}}">{{item.catname}}</text>
</view>
</block>
</scroll-view>
</view>
首先 先是获取分类节点的位置信息 计算点击其滚动的距离 存在数组中 方便后面使用
function getMenusTabsInfo(that){
var tab_left_ = that.data.tab_left_ ? that.data.tab_left_ : [];
var isChange = that.data.isChange ? that.data.isChange : false;
if (wx.canIUse('createSelectorQuery')){
setTimeout(function(){
var query = wx.createSelectorQuery();
var tab_left_ = [];
query.select('.nav-list').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function (res) {
if (res.length) {
nav_w = res[0].width;
query.selectAll('.nav-i').boundingClientRect(function (rect) {
if (rect.length >= 1) {
for (var i in rect) {
var tab_ = {};
tab_.left = rect[i].left;
tab_.width = rect[i].width;
tab_.scroll_left = rect[i].left > nav_w / 2 ? rect[i].left - nav_w / 2 - 13 : 0
tab_left_.push(tab_);
}
that.setData({
tab_left_: tab_left_
})
}
}).exec()
}
})
},300)
}
}
点击 分类 时根据上面获取的数据进行 scroll-left赋值
function setTabPosition(that) {//设置分类位置
var tab_left_ = that.data.tab_left_ ? that.data.tab_left_ : [];
var menus = that.data.menus;
var menus_width = win_w - 60;
var select_index = that.data.select_index ? that.data.select_index : 0;
var width_ = 0;
var scroll_view_id = 0;
if (!tab_left_.length) { return }
that.setData({
tab_scroll_left: Number(tab_left_[select_index].scroll_left)
})
}
赋值时打印 赋值是正常的
但是安卓机却 没有效果 苹果机是正常 该分类 显示在屏幕中间位置
设备信息下图
麻烦看下是哪里代码问题吗?非常感谢