基于 vue2 导航栏透明渐变

在移动或者app 中经常会用，顶部导航栏固定，但是随着页面向上滚动，导航栏的透明度发生变化。

做法为：

1、首先给要滚动变化的导航添加

:style="style"

<mt-header fixed title="个人中心" :style="style">

        <router-link to="/" slot="left" class="news_box">

            <mt-button style="overflow: visible;">

                <i class="iconfont news_icon"></i>

                <span class="news_num"></span>

            </mt-button>

        </router-link>

        <router-link to="/" slot="right">

            <mt-button>

                <i class="iconfont set_icon"></i>

            </mt-button>

        </router-link>

    </mt-header>

2、在 data 数据中声明需要的变量

 data () {

            return {

                style: {},

                opacity:

            };

        },

3、变化样式

(a): 基于 scroll 做的滚动的方法

created () {

            this.$nextTick(() => {

                this._initBody();

            });

        },

        methods: {

            _initBody () {

                this.mainBodyScroll = new BScroll(this.$refs.mainBody, {

                    click: true,

                    probeType:

                });

                this.mainBodyScroll.on('scroll', (pros) => {

                    this.opacity = Math.abs(Math.round(pros.y)) / ;

                    this.style = {background: `rgba(,,,${this.opacity})`};

                });

            }

        }

(b)：没有用框架的滚动，自然滚动

window.onscroll = ()=> {

          vm.opacity = window.pageYOffset / ;

          vm.$store.commit('setHeadStyle', {background: `rgba(,,,${vm.opacity})`});

        }

这样便可以实现导航的渐变了。

同时有很多那种在滚动的时候出现的控制类的，例如高度滚动到什么地址的时候，某一个都东西固定不动了。

巴特西

基于 vue2 导航栏透明渐变

最新文章

热门文章