WeUI框架

WeUI框架

WeUI是一套小程序的UI框架，所謂UI框架就是一套界面設計方案，有了組件，咱們能夠用它來拼接出一個內容豐富的小程序，而有了UI框架，咱們就能夠讓咱們的小程序變得更加美觀。

體驗WeUi小程序

WeUI是微信官方設計團隊的一套同微信原生視覺體驗一致的基礎樣式庫，在手機微信裏搜索WeUI小程序便可。

下載源碼就能夠看到weui-wxss-master文件夾，導入項目，體驗

爲何是weui-wxss-master下的dist⽂件夾，⽽不是weui-wxss-master？ 你還記得什麼是⼩程序的根⽬錄嗎？

下載了WeUI的源代碼，其實WeUI的核⼼⽂件是weui.wxss。

如何在咱們 的模板⼩程序⾥使⽤WeUI的樣式呢？

├── pages  
├── image  
├── style
│   ├── weui.wxss  
├── app.js
├── app.json
├── app.wxss複製代碼

把weui⼩程序dist/style⽬錄下的weui.wxss⽂件粘貼到style的⽂件夾⾥

@import 'style/weui.wxss';複製代碼

Flex佈局

佈局也是⼀種樣式，也屬於css⽅⾯的知識哦Flex是Flexible Box的縮寫，意爲」彈性佈局」

<view class="flex-box">
  <view class='list-item'>Python</view>
  <view class='list-item'>⼩程序</view>
  <view class='list-item'>⽹站建設</view>
</view>複製代碼

.list-item{
  background-color: #82c2f7;
  height: 100px;
  text-align: center;
  border:1px solid #bdd2f8; 
}複製代碼

讓組件變成左右關係

.flex-box{
  display: flex; 
}複製代碼

讓組件的寬度均分

.list-item{
  flex:1; 
}複製代碼

讓組件內的內容垂直居中

.list-item{
  display: flex;
  align-items:center;/*垂直居中*/
  justify-content: center;/*⽔平居中*/
 }複製代碼

全局樣式與局部樣式

定義在 app.wxss 中的樣式爲全局樣式，做⽤於每⼀個⻚⾯。

在 page 的 wxss ⽂件中定 義的樣式爲局部樣式，只做⽤在對應的⻚⾯，並會覆蓋 app.wxss 中相同的選擇器。

漸變與動畫CSS的漸變Gradientlinear-gradient() 函數⽤於建立⼀個表示兩種或多種顏⾊ 線性漸變的圖⽚。

在gradient.wxml⻚⾯輸⼊如下代碼：

<view class="gradient-display">
</view>複製代碼

在gradient.wxss⾥輸⼊：

.gradient-display{
  background-image:linear-gradient(red, blue);
  width: 100vw;
  height: 100vh;
  }複製代碼

它默認的漸變⽅向是從上到下改變漸變的⽅向

background-image: linear-gradient(45deg, blue, red);
/* 漸變軸爲45度，從藍⾊漸變到紅⾊ */複製代碼

background-image:linear-gradient(to left top, blue, red);
/* 從右下到左上、從藍⾊漸變到紅⾊ */複製代碼

background-image:linear-gradient(0deg, blue, green 40%, red);
/* 從下到上（漸變軸爲0度），從藍⾊開始漸變、到⾼度40%位置是綠⾊漸變開始、最後以紅⾊結束
 */複製代碼

Filter濾鏡

濾鏡filter屬性，能夠對圖⽚進⾏⾼斯模糊、調整 對⽐度、轉換爲灰度圖像、⾊相旋轉、圖⽚透明等操做。

⾼斯模糊blur，圖⽚變灰grayscale(%)，圖⽚透 明opacity(%)

 .filter-display img{
        width: 150px;height: auto;
    }
    .blur{
        filter: blur(8px);
    }
    .grayscale{
        filter: grayscale(90%);
    }
    .opacity{
        filter: opacity(25%);
    }
    .multiple{
        filter: blur(8px) grayscale(90%) opacity(25%);
    }複製代碼

變形屬性Transform

CSS transform屬性能經過修改CSS視覺格式化模型的座標空間旋轉、縮放、傾斜或平移給定 的組件。

變形Transform、過渡Transition、動畫Animation

.transform-display image{
  width: 80px;height: 80px;
  }
.scale{
    transform: scale(1,0.5); }
.translate{
    transform: translate(500px,20px); }
.rotate{
    transform: rotate(45deg); }
.skew{
    transform: skew(120deg); }複製代碼

過渡屬性TransitionCSS transitions 能夠控制組件從⼀個屬性狀態切換爲另外⼀個屬性狀態時的過渡效果。

.selector {
    transition: [transition-property] [transition-duration] [transition-ti
ming-function] [transition-delay]; }複製代碼

transition-property，應⽤過渡的 CSS 或動畫屬性的名稱；transition-duration，整個過渡效果持續的時間transition-timing-function，規定過渡效果的時間曲線transition-delay，過渡效果延遲多久

動畫屬性Animation

CSS animations 使得能夠將從⼀個CSS樣式配置轉換到另⼀個CSS樣式配置。動

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  } }
.fadeIn {
  animation: 4s linear 0s infinite alternate fadeIn; }複製代碼

抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉 （rotateIn/rotateOut）、淡⼊淡出（fadeIn/fadeOut）

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。

請點贊！由於大家的贊同/鼓勵是我寫做的最大動力！

歡迎關注達達的簡書！

這是一個有質量，有態度的博客