mpvue小程序功能：横向滚动

mpvue小程序功能：左右滚动

结构

  <!--新品首发  -->
    <div class="newgoods">
      <div class="newgoods-top" @click="goodsList('new')">
        <div class="top">
          <p>新品首发</p>
          <p>查看全部</p>
        </div>
      </div>
      <div class="list">
        <ul>
          <scroll-view class="scroll-view" :scroll-x="true">
            <li v-for="(item ,index) in newGoods" :key="index">
              <img :src="item.list_pic_url" alt />
              <p>{{item.name}}</p>
              <p>{{item.goods_brief}}</p>
              <p>¥{{item.retail_price}}</p>
            </li>
          </scroll-view>
        </ul>
      </div>
    </div>

样式

  .newgoods {
    width: 100%;

    &-top {
      margin-top: 20rpx;
      height: 260rpx;
      width: 100%;
      background: url('../../../static/images/bgnew.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;

      .top {
        p {
          color: #8c9bae;
          font-size: 32rpx;
        }

        p:nth-child(2) {
          width: 180rpx;
          height: 50rpx;
          line-height: 50rpx;
          margin: 27rpx auto 0 auto;
          font-size: 22rpx;
          background: #d8e4f0;
        }
      }
    }
	// 左右滚动
    .list {
      margin-top: 20rpx;
      background-color: #fff;
      padding-bottom: 10rpx;

      ul {
        .scroll-view {
          width: 100%;
          white-space: nowrap;

          li {
            width: 280rpx;
            height: 416rpx;
            margin: 5rpx 0 5rpx 25rpx;
            display: inline-block;

            img {
              width: 280rpx;
              height: 280rpx;
            }

            p {
              width: 94%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              margin-top: 8rpx;
              text-indent: 1em;
            }

            p:nth-child(2) {
              font-size: 30rpx;
              font-weight: bold;
            }

            p:nth-child(3) {
              font-size: 24rpx;
              color: #8a8a8a;
            }

            p:nth-child(4) {
              font-size: 24rpx;
              color: #9c3232;
            }
          }
        }
      }
    }
  }