創新互聯www.cdcxhl.cn八線動態BGP香港云服務器提供商，新人活動買多久送多久，劃算不套路！

為利辛等地區用戶提供了全套網頁設計制作服務，及利辛網站建設行業解決方案。主營業務為做網站、網站制作、利辛網站設計，以傳統方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業、用心的態度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

小編這次要給大家分享的是微信小程序如何實現列表的橫向滑動，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

微信小程序原生方式實現列表的橫向滑動的兩種方法：

效果圖：

方式一：簡單樣式實現

父元素設置：

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 >
     方式一：<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 >
    <view>方式二：scroll-view的橫向滾動：</view>
    <view>scroll-view的內層view元素需要：display：inline-block;</view>
    <view>scroll-view的外層元素需要：white-space:nowrap;</view>
  </view>
  <view >
    <scroll-view scroll-x>
      <view class="listContent2">
        <view  class="item2" wx:for="{{userList}}" wx:key="{{index}}">
          <image class="userAvatar" src="{{item.avatar}}" mode="aspectFit"/>
          <view class="userName">{{item.userName}}</view> 
        </view>
      </view> 
    </scroll-view>
  </view>
</view>

分享名稱：微信小程序如何實現列表的橫向滑動-創新互聯
轉載來源：http://vcdvsql.cn/article44/pjohe.html

成都網站建設公司_創新互聯，為您提供用戶體驗、Google、外貿建站、關鍵詞優化、電子商務、手機網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯