微信小程序开发教程之视图容器新手教程。
横向滑动,如下
<code class="language-wxml hljs xml has-numbering">/*wxml*/<view> <scroll-view class="demo-view-1" scroll-x="true"> <view class="bc_green bc_size inline"></view> <view class="bc_red bc_size inline"></view> <view class="bc_blue bc_size inline"></view> <view class="bc_pink bc_size inline"></view> <view class="bc_yellow bc_size inline"></view> <view class="bc_gray bc_size inline"></view> <view class="bc_tan bc_size inline"></view> </scroll-view></view></code></pre><pre class="prettyprint" name="code"><code class="language-css hljs has-numbering">/*wxss*/.demo-view-1{ white-space: nowrap; height: 300rpx;}.bc_green{ background-color: #00ff00;}.bc_red{ background-color: #ff0000;}.bc_blue{ background-color: #0000ff;}.bc_pink{ background-color: pink;}.bc_yellow{ background-color: yellow;}.bc_gray{ background-color: gray;}.bc_tan{ background-color: tan;}.inline{ display: inline-block;}.bc_size{ width: 300rpx; height: 300rpx;}</code>
运行效果如下
scroll-view标签上需要注意的属性,如下
属性名 | 说明 | 位置 | 备注 |
---|---|---|---|
scroll-x | 水平方向滑动时必须设置为true | scroll-view标签 | 只能在wxml中设置 |
white-space | 必须设置为nowrap | scroll-view标签 | 可以在wxss中设置 |
display | 必须设置为inline-block | scroll-view的子组件上 | 可以在wxss中设置 |
display:inline-block,这对键值只需要在scroll-view的子组件上设置就可以了,scroll-view上不需要设置display属性,默认值即可。
竖直方向滑动,如下
<code class="language-xml hljs has-numbering">/*wxml*/<view> <scroll-view class="demo-view-2" scroll-y="true"> <view class="bc_green bc_size"></view> <view class="bc_red bc_size"></view> <view class="bc_blue bc_size"></view> <view class="bc_pink bc_size"></view> <view class="</tr"> </view></scroll-view></view></code>
新闻热点
疑难解答