小程序横向图文滚动布局，H5也一样的原理

版权声明：菜鸟老五 https://blog.csdn.net/qq_35695041/article/details/84841478

//WXML
<!-- 外层视图容器 -->
<view class="section">
<!-- scroll视图容器 -->
  <scroll-view class="scroll_view" scroll-x="true">
  <!-- 滚动列表内容 -->
    <view class="cont" wx:for="{{list}}" wx:key="{{item}}">
    <!-- 滚动图片 -->
      <image src="{{item.url}}"class="cont_img"/>
      <!-- 滚动文本 -->
      <view class="content">
      <view  class="cont_name" >{{item.name}}</view>
      <view class="cont_title">
        <view class="area">{{item.title}}</view>
      </view>
      </view>
    </view>
  </scroll-view>
</view>

//JS
Page({
  data: {
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    // 滚动数据
    list: [{
        url: "http://img1.imgtn.bdimg.com/it/u=3955169476,1808580451&fm=26&gp=0.jpg",
        name: "让自律成为一篇信仰让自律成为一篇信仰",
        title: "有你有我",
      },
      {
        url: "http://www.hrcntv.net/uploadfile/2018/0624/20180624025852151.jpg",
        name: "让自律成为一篇信仰让自律成为一篇信仰",
        title: "有你有我",
      },
      {
        url: "http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20180618/23d2e0370dd44c25902e0b5d7ff5c70b.jpeg",
        name: "让自律成为一篇信仰让自律成为一篇信仰",
        title: "有你有我",
      },
      {
        url: "http://t12.baidu.com/it/u=677463818,1574317276&fm=173&s=6D78AB4684D9FB9421AC89D903005093&w=542&h=340&img.JPEG",
        name: "让自律成为一篇信仰让自律成为一篇信仰",
        title: "有你有我",
      }, {
        url: "http://t12.baidu.com/it/u=677463818,1574317276&fm=173&s=6D78AB4684D9FB9421AC89D903005093&w=542&h=340&img.JPEG",
        name: "让自律成为一篇信仰让自律成为一篇信仰",
        title: "有你有我",
      },

    ],
  },
 
})

//WXSS

/* 轮播外层视图 */

.section {
  width: 100%;
  height: 430rpx;
  text-align: center;
}

/* 轮播视图 */

.scroll_view {
  height: 430rpx;
  display: inline-block;
  width: 90%;
  /* white-space: nowrap; */
  white-space: nowrap;
}

/* 轮播图片内容视图 */

.cont {
  width: 295rpx;
  height: 430rpx;
  margin-right: -10rpx;
  display: inline-block;
  margin-left: 35rpx;
}

/* 轮播图片大小 */

.cont_img {
  width: 293rpx;
  border-radius: 10rpx;
  height: 293rpx;
  display: block;
}

/* 轮播文本 */

.cont .content {
  width: 288rpx;
  height: 130rpx;
}

/* 标题昵称 */

.cont_name {
  margin-top: 20rpx;
  display: -webkit-box;
  font-size: 28rpx;
  text-align: left;
  color: #000;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-line;
}

/* title */

.cont_title {
  width: 100%;
  height: 40rpx;
  font-size: 11px;
  color: #a8a8a8;
}

.area {
  float: left;
  width: 60rpx;
  height: 30rpx;
  line-height: 30rpx;
}