mpvue小程序功能：横向滚动

忘是亡心i 2023-02-23 03:45 7阅读 0赞

## 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;
                }
              }
            }
          }
        }
      }