微信小程序实现列表的横向滑动

微信小程序原生方式实现列表的横向滑动的两种方法：

效果图：

方式一：简单样式实现

• 父元素设置：
  white-space:nowrap;//不换行
  overflow-x: auto;
• 子元素设置：
  display:inline-block;

方式二：scroll-view 标签 + 样式

scroll-view的横向滚动：

• scroll-view的内层view元素需要：display：inline-block;
• scroll-view的外层元素需要：white-space:nowrap;

实现代码：

1.wxml

<!--pages/packageA//multiple-function/multiple-function.wxml-->
<view class="content">
     <view class="Btn">
         <view class="clickBtn"  data-id="" bindtap = "toClickTab">返回功能列表页</view>
     </view>
     <view>实现横向滚动效果：</view>
     <view style="margin-top: 60rpx;">
         方式一：<view>父元素设置 white-space:nowrap;//不换行  overflow-x: auto;</view>
                <view>子元素设置display:inline-block;</view>
     </view>
     <view class="listContent">
         <view class="item" wx:for="{
   {userList}}" wx:key="{
   {index}}">
             <image class="userAvatar" src="{
   {item.avatar}}" mode="aspectFit"/>
             <view class="userName">{
   {
   item.userName}}</view>  
         </view>
     </view> 
     <view style="margin-top: 60rpx;margin-bottom: 20rpx;">