创建轮播图
使用微信小程序组件swiper。swiper-item
<view class="indexContainer">
<!-- 轮播图 -->
//indicator-dots="true"是否显示小圆点 小圆点颜色 选中的小圆点颜色
<swiper class="banners" indicator-dots="true" indicator-color="ivory" indicator-active-color="#d43c33">
<swiper-item>
<image src=""></image>
</swiper-item>
<swiper-item>
<image src=""></image>
</swiper-item>
<swiper-item>
<image src=""></image>
</swiper-item>
<swiper-item>
<image src=""></image>
</swiper-item>
</swiper>
<view>
wxss:
.banners{
width: 100%;
height: 300rpx;
}
.banners image{
width: 100%;
height: 100%;
}
导航区:
<view class="navContainer">
<view class="navItem">
<text class="iconfont icon-meirituijian"></text>
<text>每日推荐</text>
</view>
<view class="navItem">
<text class="iconfont icon-gedan1"></text>
<text>歌单</text>
</view>
<view class="navItem">
<text class="iconfont icon-icon-ranking"></text>
<text>排行榜</text>
</view>
<view class="navItem">
<text class="iconfont icon-diantai"></text>
<text>电台</text>
</view>
<view class="navItem">
<text class="iconfont icon-zhiboguankanliangbofangsheyingshexiangjixianxing"></text>
<text>直播</text>
</view>
</view>
wxss
/* 导航曲序样式 */
.navContainer{
display: flex;
}
.navItem{
display: flex;
flex-direction: column;
align-items: center;
width: 20%;
}
.navItem text{
font-size: 24rpx;
}
.navItem .iconfont{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
text-align: center;
line-height: 100rpx;
font-size: 50rpx;
background: rgb(240, 19, 19);
color: #fff;
margin: 20rpx 0;
}
推荐模块:
<!-- 推荐歌曲内容 -->
<view class="recommendContainer">
<view class="header">
<text class="title">推荐歌曲</text>
<view>
<text>为你精心推荐</text>
<text class="more">查看更多</text>
</view>
</view>
<!-- 内容去 -->
<scroll-view class="recommen" enable-flex="true" scroll-x="true">
<view class="scrollItem">
<image src="/static/images/1.jpg"></image>
<text>123456789101112134561111111111111111111111111111</text>
</view>
<view class="scrollItem">
<image src="/static/images/2.jpg"></image>
<text>123456789</text>
</view>
<view class="scrollItem">
<image src="/static/images/3.jpg"></image>
<text>123456789</text>
</view>
<view class="scrollItem">
<image src="/static/images/4.jpg"></image>
<text>123456789</text>
</view>
</scroll-view>
</view>
wxss
/* 推荐歌曲 */
.recommendContainer{
margin: 20rpx;
}
.recommendContainer .header .title{
font-size: 32rpx;
line-height: 80rpx;
color: #666666;
}
.recommendContainer .header .more{
float: right;
border: 1rpx solid #333;
padding:10rpx 20rpx;
font-size: 26rpx;
border-radius: 30rpx;
}
/* 推荐内容去 */
.recommen{
display: flex;
}
.scrollItem{
width: 200rpx;
margin-right: 20rpx;
}
.scrollItem image{
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
}
.scrollItem text{
font-size: 26rpx;
/* 单上省略号 */
/* display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; */
/* 多行 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical; /* 设置对其模式 纵向对其*/
-webkit-line-clamp: 2; /* 行数,超过隐藏*/
word-break: break-all; /* 不成功写这个 */
}
1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。
2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。