主要知识点: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: '官方小程序介绍视频'
}
]
}
})