創(chuàng)新互聯(lián)www.cdcxhl.cn八線動態(tài)BGP香港云服務(wù)器提供商，新人活動買多久送多久，劃算不套路！

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

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

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

效果圖：

方式一：簡單樣式實現(xiàn)

父元素設(shè)置：

white-space:nowrap;//不換行
overflow-x: auto;子元素設(shè)置：
display:inline-block;

方式二：scroll-view 標(biāo)簽 + 樣式

scroll-view的橫向滾動：

• scroll-view的內(nèi)層view元素需要：display：inline-block;
• scroll-view的外層元素需要：white-space:nowrap;

實現(xiàn)代碼：

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>實現(xiàn)橫向滾動效果：</view>
   <view >
     方式一：<view>父元素設(shè)置 white-space:nowrap;//不換行 overflow-x: auto;</view>
        <view>子元素設(shè)置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的內(nèi)層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>

分享名稱：微信小程序如何實現(xiàn)列表的橫向滑動-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://aaarwkj.com/article44/pjohe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、Google、外貿(mào)建站、關(guān)鍵詞優(yōu)化、電子商務(wù)、手機網(wǎng)站建設(shè)

廣告

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