微信小程序頂部漸變色實現

源碼地址 https://gitee.com/xshuai/easydlsmartappdemo/tree/master/pages/demo 

 

先看一下效果圖

linear-gradient() 簡介

linear-gradient() 函數用於創建一個線性漸變的 "圖像"。

爲了創建一個線性漸變，你需要設置一個起始點和一個方向（指定爲一個角度）的漸變效果。你還要定義終止色。終止色就是你想讓Gecko去平滑的過渡，並且你必須指定至少兩種，當然也會可以指定更多的顏色去創建更復雜的漸變效果

 

實現過程

自定義頂部

{
    "usingComponents":{

    },
    "navigationStyle":"custom"
}

目前本身組件API不支持漸變。那需要自定義頂部導航來實現

頁面樣式

需要動態根據顏色重新渲染，顏色取值需要動態獲取

linear-gradient({{bottomColor}},

{{gradientColor}},#ffffff);

動態更改

給輪播圖增加一個事件操作，以達到動態修改漸變色的功能

testSwiper: function(e) {
        var that = this;
        var index = e.detail.current;
        var currentbottomColor =
        that.data.movies[index].bottomColor;
        var currentgradientColor =
        that.data.movies[index].gradientColor;
        that.setData({
                bottomColor:
                    currentbottomColor,
                gradientColor:
                    currentgradientColor
        })
}

源碼地址 https://gitee.com/xshuai/easydlsmartappdemo/tree/master/pages/demo

推薦2個漸變色取色網站

coolhue

https://webkul.github.io/coolhue/

uiGradients

https://uigradients.com/#Reef

 

小程序新增面相分析要不要體驗一下哦

打開微信掃一掃