微信小程序----列表横向滑动

先上效果图

横向滑动列表
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，不然横排会失效。