收藏
回答

scroll-view在使用scroll-x无效

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug scroll-view 客户端 WeChat Version 7.0.4 WeChatLib: 2.7.4

测试手机: 华为Mate9 Pro




<view>

<view class='main-title'>资讯</view>  

<scroll-view class="scroll-horizontal" scroll-x="true" wx:for="{{newTitles}}" wx:key="item">

<view id='{{item.colid}}' class='nav-item'>{{item.colname}}</view>

</scroll-view>

</view>


.scroll-horizontal{

width: 100%;

height: 40px;

white-space: nowrap;

}


.nav-item{

width: 100px;

height: 40px;

line-height: 30px;

text-align: center;

display: inline-block;

background-color: #E2FCFE;

}


//index.js

//获取应用实例

const app = getApp()


Page({

data: {

newTitles: [{ colname: 'xx', colid: 1 }, { colname: 'tt', colid: 2 }, { colname: 'gg', colid: 3 }]

}

})


为什么scroll-x无效,按官网文档上不加属性值true也试过,是无效的

<scroll-view class="scroll-horizontal" scroll-x wx:for="{{newTitles}}" wx:key="item">

<view id='{{item.colid}}' class='nav-item'>{{item.colname}}</view>

</scroll-view>


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

2 个回答

  • 祺爸💎
    祺爸💎
    07-08

    wx:for放错地方了,自己看看调试器wxml就知道了

    07-08
    赞同
    回复 6
    • 往事如风
      往事如风
      07-08

      再请教wx:for不是应该放在scroll-view容器上吗?

      07-08
      回复
    • 祺爸💎
      祺爸💎
      07-08回复往事如风

      自己看看调试器wxml里实际的代码是什么样的

      07-08
      回复
    • 往事如风
      往事如风
      07-08回复祺爸💎

      被你说中了,wx:for应该加在子项里,用angularjs的思想来做wx:for的事了,非常感谢!

      07-08
      回复
    • 往事如风
      往事如风
      07-08回复祺爸💎

      这问题折腾了一早上了,就没往wx:for位置方向去考虑

      07-08
      回复
    • 祺爸💎
      祺爸💎
      07-08回复往事如风

      调试器很重要

      07-08
      回复
    查看更多(1)
  • 三世羽翾
    三世羽翾
    07-08

    关于scroll-view横向滚动问题可参考

    https://blog.csdn.net/JiangYuXuan1994/article/details/82622083

    07-08
    赞同
    回复