LinUI学习9 自定义组件的外部样式引入import

LinUI学习9 自定义组件的外部样式引入import

当我们需要在自定义组件中引入一个外部样式时，如我们需要点击左下角的图片产生一个点击效果，此时如果将直接将公用wxss写在app.wxss中是不可取的。因为自定义组件是封闭的。

 

正确的方式是：

1、新建一个文件夹用于存放wxss

 

在内部新建一个sleeve.wxss文件代码如下：

.rect-hover{
  position: relative;
  top: 3rpx;
  left: 3rpx;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1) inset;
} //这是一个很常规的点击动画效果

2、在自定义组件的wxss引入，以hot-list为例

在hot-list文件夹下的index.wxss引入，代码如下

@import "../../wxss/sleeve.wxss";

 

3、使用该css产生点击效果

  <view hover-class="rect-hover" hover-stay-time="200" > //hover-class是小程序自带的view特有的点击态动画关联方式 hover-stay-time是回弹的时间 单位是毫秒
      <image src="{{left.img}}" class="left"></image>
    </view>

这里需要注意的是“hover-stay-time”设置的时长不能过长，会影响用户体验。