小编这次要给大家分享的是微信小程序如何实现列表的横向滑动，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。

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

效果图：

方式一：简单样式实现

父元素设置：

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

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

scroll-view的横向滚动：

实现代码：

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>

2.js

// pages/packageA//multiple-function/multiple-function.jsPage({ /** * 页面的初始数据 */ data: { userList:[ {'id':"1","avatar":"../../../images/tarbar/my-selected.png","userName":"用户1"}, {'id':"2","avatar":"../../../images/tarbar/my-selected.png","userName":"用户2"}, {'id':"3","avatar":"../../../images/tarbar/my-selected.png","userName":"用户3"}, {'id':"4","avatar":"../../../images/tarbar/my-selected.png","userName":"用户4"}, {'id':"5","avatar":"../../../images/tarbar/my-selected.png","userName":"用户5"}, {'id':"6","avatar":"../../../images/tarbar/my-selected.png","userName":"用户6"}, {'id':"7","avatar":"../../../images/tarbar/my-selected.png","userName":"用户7"}, {'id':"8","avatar":"../../../images/tarbar/my-selected.png","userName":"用户8"}, {'id':"9","avatar":"../../../images/tarbar/my-selected.png","userName":"用户9"}, {'id':"10","avatar":"../../../images/tarbar/my-selected.png","userName":"用户10"}, {'id':"11","avatar":"../../../images/tarbar/my-selected.png","userName":"用户11"}, ] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }})

3.wxss

/* pages/packageA//multiple-function/multiple-function.wxss */page{ width: 100%; height: 100%; background: #f7f7f7;}.main{ width:100%; margin-top: 60rpx; position: relative;}.row{ display: flex; flex-direction: row; align-items: center; height: 100rpx; background: #ffffff;}.hintText{ width:90%; font-size: 28rpx; color:#000000; font-family: PingFang SC; font-weight: 400; padding-left: 30rpx;}.rightArrow{ width:36rpx; height: 36rpx;}.line{ margin-left: 30rpx; height: 1px; background: #eeeeee;}/*列表项*/.listContent{ width:100%; margin-top: 20rpx; white-space: nowrap;/*父元素 一行显示，不换行*/ overflow-x: auto;}.item{ display: inline-block;/*子元素 display: inline-block*/ width:20%; height: 100rpx; text-align: center;}.userAvatar{ width:60rpx; height: 60rpx;}/*用户名*/.userName{ font-size: 28rpx; color:#acacac}/*列表项*/.listContent2{ width:100%;}.item2{ width:20%; height: 100rpx; text-align: center;}/*去除下划线的线条*/::-webkit-scrollbar{ width:0; height: 0; color: transparent;}.viewBtn{ width: 100%; height: 80rpx; padding-top: 20rpx;}/*返回按钮*/.clickBtn{ width:250rpx; line-height: 1; font-size: 32rpx; font-weight: 600; padding: 24rpx 0; background-color: #07c160; color:#ffffff; margin-left: 20rpx; border-radius: 10rpx; text-align: center;}

看完这篇关于微信小程序如何实现列表的横向滑动的文章，如果觉得文章内容写得不错的话，可以把它分享出去给更多人看到。