LinUI學習9 自定義元件的外部樣式引入@import
阿新 • • 發佈:2021-01-21
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