1. 程式人生 > 實用技巧 >LinUI學習9 自定義元件的外部樣式引入@import

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

”設定的時長不能過長,會影響使用者體驗。