测试手机: 华为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>
关于scroll-view横向滚动问题可参考
https://blog.csdn.net/JiangYuXuan1994/article/details/82622083
wx:for放错地方了,自己看看调试器wxml就知道了
再请教wx:for不是应该放在scroll-view容器上吗?
自己看看调试器wxml里实际的代码是什么样的
被你说中了,wx:for应该加在子项里,用angularjs的思想来做wx:for的事了,非常感谢!
这问题折腾了一早上了,就没往wx:for位置方向去考虑
调试器很重要