微信小程序实现横向滚动
最近做项目的时候遇到一个需求实现自定义导航栏的横向滚动,研究了一会,今天记录一下.
看一下实现效果: (下面的导航栏由六个view组成,可滑动)
<!--pages/test/test.wxml-->
<view class='index' >
<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex ; " >
<view style="background: red; width: 150rpx; height: 100px; display: inline-block" ></view>
<view style="background: green; width: 150rpx; height: 100px; display: inline-block"></view>
<view style="background: blue; width: 150rpx; height: 100px; display: inline-block"></view>
<view style="background: yellow; width: 150rpx; height: 100px; display: inline-block"></view>
<view style="background: green; width: 150rpx; height: 100px; display: inline-block"></view>
<view style="background: blue; width: 150rpx; height: 100px; display: inline-block"></view>
</scroll-view>
</view>
/* pages/test/test.wxss */
.index{
height:120rpx;
width:100%;
position: fixed;
bottom:0;
left:0;
border-top:1px solid #ddd;
}