先上效果图 横向滑动列表 js主要代码：
/*超值优惠区*/ chaozhilist:[ { url:"", image:"https://i02piccdn.sogoucdn.com/69e33946ebd9ce5c", restaurantName:"铁板烧", foodname:"小龙虾超值豪华套餐", price:"50" }, { url: "", image: "https://i02piccdn.sogoucdn.com/69e33946ebd9ce5c", restaurantName: "铁板烧", foodname: "小龙虾超值豪华套餐", price: "50" }, { url: "", image: "https://i02piccdn.sogoucdn.com/69e33946ebd9ce5c", restaurantName: "铁板烧", foodname: "小龙虾超值豪华套餐", price: "50" }, { url: "", image: "https://i02piccdn.sogoucdn.com/69e33946ebd9ce5c", restaurantName: "铁板烧", foodname: "小龙虾超值豪华套餐", price: "50" }, { url: "", image: "https://i02piccdn.sogoucdn.com/69e33946ebd9ce5c", restaurantName: "铁板烧", foodname: "小龙虾超值豪华套餐", price: "50" } ]wxml代码：
<scroll-view class="container-zhaozhi" scroll-x="true"> <text>超值优惠</text> <view class="chaozhi"> <block wx:for="{{chaozhilist}}" wx:key=""> <view class="chaozhilist"> <image src="{{item.image}}"></image> <view class="restaurantName">{{item.restaurantName}}</view> <view class="pf"> <view class="price">￥{{item.price}}</view> <view class="foodname">{{item.foodname}}</view> </view> </view> </block> </view> </scroll-view>wxss代码：
.container-zhaozhi{ padding: 0 10rpx; border-radius: 20rpx; white-space: nowrap;/*不放这个不能横排*/ } .container-zhaozhi text{ position:fixed;/*固定文字 不管怎么滑动标题文字都被滑走*/ font-size: 35rpx; font-weight: bold; color: #050505; padding-left: 10rpx; } .container-zhaozhi .chaozhilist{ width: 200rpx; height: 270rpx; display: inline-block;/*不放这个不能横排*/ } .container-zhaozhi .chaozhilist image{ border-radius: 20rpx; padding-top: 60rpx; width: 180rpx; height: 150rpx; } .container-zhaozhi .chaozhilist .restaurantName{ font-size:30rpx; overflow: hidden;/*隐藏溢出*/ text-overflow: ellipsis;/*显示省略符号来代表被修剪的文本*/ white-space: nowrap;/*强制文字不换行*/ } .container-zhaozhi .chaozhilist .pf{ height:40rpx; width: 180rpx; display: flex;/*横向布局*/ } .container-zhaozhi .chaozhilist .pf .price{ color: red; font-size: 30rpx; } .container-zhaozhi .chaozhilist .pf .foodname{ font-size: 30rpx; overflow: hidden;/*隐藏溢出*/ text-overflow: ellipsis;/*显示省略符号来代表被修剪的文本*/ white-space: nowrap;/*强制文字不换行*/ }固定文字*/要特别注意在第一个class设置中加上 white-space: nowrap以及在第二个class设置加上 display: inline-block，不然横排会失效。
