微信小程序 导航横向滚动

 actionList:[
      {name:'名片夹',img:'/images/save.png'},{name:'名片夹',img:'/images/save.png'},{name:'名片夹',img:'/images/save.png'},
      {name:'名片夹',img:'/images/save.png'},{name:'名片夹',img:'/images/save.png'},{name:'名片夹',img:'/images/save.png'},
      {name:'名片夹',img:'/images/save.png'},{name:'名片夹',img:'/images/save.png'},{name:'名片夹',img:'/images/save.png'},  {name:'名片夹',img:'/images/save.png'},{name:'名片夹',img:'/images/save.png'},{name:'名片夹',img:'/images/save.png'},
      {name:'名片夹',img:'/images/save.png'},{name:'名片夹',img:'/images/save.png'},{name:'名片夹',img:'/images/save.png'}]

<view class="action-wrap">
  <view class="action-Left">
    <view class="action-text">
      <text>名</text>
      <text>片</text>
      <text>码</text>
    </view>
    <view class="codeImg">
      <image src='/images/code@3x.png' class="codeImg"></image>
    </view>
  </view>
  <scroll-view scroll-x="true" class="action-right">
    <button class="item" wx:for="{{actionList}}" wx:key="{{index}}">
      <view class="scroll-img-wrap">
        <image src="{{item.img}}" class="action-img" />
      </view>
      <text class="scroll-title scroll-major-title">{{item.name}}</text>
    </button>
  </scroll-view>
</view>

page {
  background-color: #F3F3F7;
}
.action-wrap,.codeImg,.item{
  background-color: #ffffff;
}
.action-wrap {
  width: 100%;
  height: 144rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.action-Left {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  width:95rpx;
  height: 144rpx;
  font-size: 28rpx;
  border-radius: 0 10rpx 10rpx 0;
  box-shadow: 0px 0px 10rpx #cccccc;
  background-color: transparent;
}

.action-img {
  display: block;
  width: 60rpx;
  height: 60rpx;
  margin: 0 auto;
}
.action-right {
  width: 85%;
  margin-right:10rpx;
  overflow:hidden; white-space:nowrap;
}

.action-text{
  display: flex;
  flex-direction: column;
}
.codeImg{
  width: 50rpx;
  height: 50rpx;
  border-radius:50%;
  padding:10rpx;
  box-sizing: border-box;
  position: absolute;
  right: -15rpx;
  display: flex;
  align-items: center;
  border-right: 1rpx solid #CCCCCC;
  z-index: 10;
}
.item{
  display: inline-block;
  margin-right:20rpx;
  margin-left: 20rpx;
  font-size: 24rpx;
  padding: 0;
  margin-top: 10rpx;
}