小程序---左右滑动加载数据

主要知识点：scroll-view和scroll-x

xxx.wxml

<view>
    <view class='t-title'>
      <text>相关视频</text>
    </view>
    <scroll-view scroll-x class="t-scroll-header">
      <view class='t-rel-list' wx:for="{{rel}}" wx:key="id">
        <image src='{{item.img}}'></image>
        <text class='t-text conceal'>{{item.text}}</text>
      </view>
    </scroll-view>
</view>

xxx.wxss

.t-title {
  padding: 20rpx 20rpx;
  color: #212121;
  font-size: 35rpx;
}

.t-scroll-header {
  display: flex;
  white-space: nowrap;
  width: 94%;
  margin: 0 auto;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #f4f5f7;
}

.t-scroll-header view {
  width: 258rpx;
  display: inline-block;
}

.t-rel-list{
  margin-right: 25rpx;
}


.t-rel-list image {
  width: 100%;
  height: 180rpx;
}

.t-text {
  font-size: 30rpx;
  display: block
}

.conceal {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

xxx.js

// pages/left_right/left_right.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 相关视频
    rel: [
      {
        img: '../../img/lec1.png',
        text: '官方小程序介绍视频'
      },
      {
        img: '../../img/lec1.png',
        text: '官方小程序介绍视频'
      },
      {
        img: '../../img/lec1.png',
        text: '官方小程序介绍视频'
      },
      {
        img: '../../img/lec1.png',
        text: '官方小程序介绍视频'
      },
      {
        img: '../../img/lec1.png',
        text: '官方小程序介绍视频'
      },
      {
        img: '../../img/lec1.png',
        text: '官方小程序介绍视频'
      },
      {
        img: '../../img/lec1.png',
        text: '官方小程序介绍视频'
      },
      {
        img: '../../img/lec1.png',
        text: '官方小程序介绍视频'
      },
      {
        img: '../../img/lec1.png',
        text: '官方小程序介绍视频'
      },
      {
        img: '../../img/lec1.png',
        text: '官方小程序介绍视频'
      }
    ]
  }
})