网易云小程序一

创建轮播图

        使用微信小程序组件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整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。