版权声明:菜鸟老五 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;
}