【詳細】豆瓣小程序--實現滑動佈局

滑動佈局是app，小程序中非常常見的一個需求，作爲常見的需求，如何高效地完成該需求的實現，就異常關鍵。app中recycleview、listview，scrollview等佈局，那麼小程序中如何從0到1實現滑動佈局呢？請看本文

效果展示

 

可以看到多個item整體的分佈在一列上，可以用手指進行左右滑動

控件佈局

wxml文件

<view class="module-group">

  <view class="module-title">
    <view class="titlename">電影</view>
    <!--“更多”點擊跳轉的-->
    <navigator class="more">更多</navigator>
  </view>

  <scroll-view class="scroll-view" scroll-x="{true}}">

    <navigator class=" item-scrollview ">
      <view class="item-group ">
        <view class="thumbnail-group ">
          <image class="thumbnail " src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2576090251.jpg ">
          </image>
        </view>
        <view class="movie-name ">誤殺誤殺誤殺誤殺誤殺誤殺誤殺</view> 
      </view>
    </navigator>


    <navigator class=" item-scrollview ">
      <view class="item-group ">
        <view class="thumbnail-group ">
          <image class="thumbnail " src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2576090251.jpg ">
          </image>
        </view>
        <view class="movie-name ">誤殺</view>
      </view>
    </navigator>


    <navigator class=" item-scrollview ">
      <view class="item-group ">
        <view class="thumbnail-group ">
          <image class="thumbnail " src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2576090251.jpg ">
          </image>
        </view>

        <view class="movie-name ">誤殺</view>
      </view>
    </navigator>

    <navigator class=" item-scrollview ">
      <view class="item-group ">
        <view class="thumbnail-group ">
          <image class="thumbnail " src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2576090251.jpg ">
          </image>
        </view>

        <view class="movie-name ">誤殺</view>
      </view>
    </navigator>

  </scroll-view>

</view>

 wxss文件

/**index.wxss**/
.module-group{
  padding: 40rpx;
  background: #fff;
}

.module-group .module-title{
  font-size: 32rpx;
  display: flex;
  justify-content: space-between; /**字體貼着兩邊**/
}

.module-title .titlename{
  color: #494949;
}

.module-title .more{
  color: #41be57;
}

.scroll-view {
  margin-top: 40rpx;
  width: 100%;
  height: 400rpx;
  white-space: nowrap; /** 不換行 **/
}

.scroll-view .item-scrollview{
  width: 200rpx;
  margin-right: 20rpx; /**和右邊間距**/
  display: inline-block;/** 一行展示 **/
}

/** 定製最後一個item佈局 **/
.scroll-view .item-scrollview:last-of-type{
  margin-right: 0; /**保障不多出來一個margin-right 20rpx**/
}

.item-scrollview .item-group{
  width: 100%;
}

.item-group .thumbnail-group{
  width:100%;
  height: 284rpx;
}

.thumbnail-group .thumbnail{
  width: 100%;
  height: 100%;
}

.item-group .movie-name{
  font-size: 28rpx;
  text-align: center;
  margin-top: 20rpx;
  text-overflow: ellipsis; /** 超出的字用省略號代替 **/
  overflow: hidden;
}

重點細節

佈局中有幾個細節需要注意

1. title貼兩邊佈局分佈

justify-content: space-between; 

利用justify-content可以實現這個功能

2.  省略號

text-overflow: ellipsis; /** 超出的字用省略號代替 **/
overflow: hidden;

3. 定製最後一個展示的item，保證最後佈局左右兩邊margin一致

/** 定製最後一個item佈局 **/
.scroll-view .item-scrollview:last-of-type{
  margin-right: 0; /**保障不多出來一個margin-right 20rpx**/
}

喜歡的朋友，點贊，收藏一下吧~