效果展示

 自己把代码运行一遍 自己看

控件布局

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