微信小程序顶部渐变色实现

源码地址 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

 

小程序新增面相分析要不要体验一下哦

打开微信扫一扫