微信小程序--豆瓣电影学习2

外部组件库引入,引入   vant-weapp 组件库        官网地址https://youzan.github.io/vant-weapp/#/rate

右键在终端打开，通过 npm 安装 npm i vant-weapp -S --production

 

安装成功，具体某个组件的使用就可以参考文档了

小知识点

1.电影名称过长超出部分用省略号：

 

.name{

　　　　

color: #666;

font-weight: bold;

font-size: 40rpx;

word-break: break-all;/*允许在单词内换行*/

text-align: left;

line-height: 45rpx;

text-overflow: -o-ellipsis-lastline;/*css3中webkit内核提供的一个方法类似ellipsis*/

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;/*自适应盒子*/

-webkit-line-clamp: 1;/*此处为1行,如果是两行就改成2*/

-webkit-box-orient: vertical;

 

}

2.高斯模糊:filter: blur(6rpx);

上图实现：

<view class="bg" style='background:url({{array.imgUrl}})'>

</view>

<view class="mask"></view>

<view class="_info">

<image src="{{array.imgUrl}}" class="image"></image>

<view class="info">

<text class="name">{{array.name}}</text>

<view class="row"><van-rate value="{{array.score}}" bind:change="onChange" /><text style="color:#F4D03F">{{array.score}}</text></view>

<text>{{array.time}}</text>

</view>

</view>

.bg{

width: 100%;

height: 340rpx;

display: flex;

padding: 20rpx;

background-repeat: no-repeat;

background-size: cover;

color: #F4F6F7 ;

filter: blur(6rpx);

opacity: .9;

}

.mask{

position: absolute;

width: 100%;

height: 340rpx;

">#333;

top: 0;

left: 0;

z-index:-1;

}

._info{

position: absolute;

width: 100%;

height: 340rpx;

top: 0;

left: 0;

z-index:666;

color: #F4F6F7;

display: flex;

flex-direction: row;

padding: 15rpx;

}

.image{

width: 250rpx;

height: 300rpx;

border: 1px solid #999

}

.info{

flex: 1;

margin-left: 20rpx;

}

复习下使用方式

在json文件中，引入

{

"usingComponents": {

"van-panel": "vant-weapp/panel",

"van-rate": "vant-weapp/rate/index"

}

wxmll:

<!-- 剧情简介 -->

<van-panel title="剧情简介" desc="" status="">

<view>{{array.detail}}</view>

</van-panel>

<!--演员 -->

<van-panel title="演员" desc="" status="">

<view class="row">

<view wx:for="{{array.acImg}}" wx:key="{{item}}" class="imgCloumn">

<image src="{{item.img}}"></image>

<text style="text-align:center">{{item.acName}}</text>

</view>

</view>

</van-panel>

}

3.圆形头像实现

 

overflow:hidden;

display: block;

width: 160rpx;

height: 160rpx;

margin: 20rpx;

margin-top: 50rpx;

border-radius: 50%;

border: 2px solid #fff;