收藏
回答

scroll-view scroll-left 无效问题

问题模块 API/组件名称 终端类型 微信版本 基础库版本
API和组件 scroll-view 工具 安卓系统5.1 version:6.6.1 SDKVersion:1.9.0

你想反馈一个 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


如果是需求:


* 你希望有什么能力?


* 你需要这个能力的场景是 ?

点击或者切换至该分类下,该分类位置能够移动至屏幕中间位置



以上问题很久了,官方也没给个回复,希望官方能够重视一下,谢谢

最后一次编辑于  2018-01-12  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

6 个回答

  • 黄思程
    黄思程
    2018-01-19

    你好,问题未复现。请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码示例。

    2018-01-19
    赞同
    回复
  • 咖啡有点甜
    咖啡有点甜
    2018-01-22

    视图层 代码:

    <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)

    })


    }


    赋值时打印 赋值是正常的


    但是安卓机却 没有效果 苹果机是正常 该分类 显示在屏幕中间位置


    设备信息下图


    麻烦看下是哪里代码问题吗?非常感谢

    2018-01-22
    赞同
    回复
  • 咖啡有点甜
    咖啡有点甜
    2018-01-22

    调试看了下 视图层节点赋值也是正常的


    2018-01-22
    赞同
    回复
  • 咖啡有点甜
    咖啡有点甜
    2018-01-24

    原来是 scroll-view使用了flex布局导致的,有遇到该问题的朋友可以注意下哦

    2018-01-24
    赞同
    回复
  • proto
    proto
    2018-01-30

    感谢,加了flex就没用了

    2018-01-30
    赞同
    回复
  • milk
    milk
    2018-04-09

    <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也将失效



    2018-04-09
    赞同
    回复