zoukankan      html  css  js  c++  java
  • 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”设置的时长不能过长,会影响用户体验。

  • 相关阅读:
    [LOJ#6284.数列分块入门8] ODT(珂朵莉树)解法
    [CF Contest] Sum of Round Numbers 题解
    基础数论记录
    [CF Contest] Kana and Dragon Quest game 题解
    hexo上怎么写博客
    keepalived的部署
    python局部和全局变量
    python发送邮件
    lamp架构的部署
    rayns数据同步
  • 原文地址:https://www.cnblogs.com/mrkr/p/14304682.html
Copyright © 2011-2022 走看看