小程序页面效果--如何实现滚动列表左右半透明

小程序页面效果--如何实现滚动列表左右半透明

为了更好的体验左右滑动，而且更加美观，我们常常会做如下效果： 

通过伪类+渐变实现左右半透明的滚动列表，微信小程序同样也适用，渐变的兼容性不太好，所以我们需要针对不同的浏览器写不同的代码。

静态页面

首先先写个静态页面

<div>

    <ul>

        <li>左右半透明</li>

                <li>滚动列表</li>

                <li>左右半透明</li>

                <li>滚动列表</li>

                <li>伪类</li>

                <li>渐变</li>

                <li>内容</li>

    </ul>

</div>

如果是微信小程序，类似的写一个

<scroll-view scroll-x="true" enable-flex="true">

            <text>左右半透明</text>

            <text>滚动列表</text>

            <text>左右半透明</text>

            <text>滚动列表</text>

            <text>伪类</text>

            <text>渐变</text>

            <text>内容</text>

</scroll-view>

css

然后写css

.my-list:after,.my-list:before {

    display: block;

    content: "";

    position: absolute;

    z-index: 1;

    top: 0;

    height: 100%;

    width: 20%

}

.my-list:before {

    left: 0;

    background: -webkit-gradient(linear,left top,right top,from(#fff),to(hsla(0,0%,100%,0)));

    background:-webkit-linear-gradient(left,#fff,hsla(0,0%,100%,0));

    background: -moz-linear-gradient(left,#fff,hsla(0,0%,100%,0));

    background: linear-gradient(90deg,#fff,hsla(0,0%,100%,0));

}

.my-list:after {

    right: 0;

    background: -webkit-gradient(linear,right top,left top,from(#fff),to(hsla(0,0%,100%,0)));

    background: -webkit-linear-gradient(right,#fff,hsla(0,0%,100%,0));

    background: -moz-linear-gradient(right,#fff,hsla(0,0%,100%,0));

    background: linear-gradient(270deg,#fff,hsla(0,0%,100%,0));

}

其中 .my-list:after,.my-list:before 中 width 控制左右半透明的长度，根据需求更改

如此便通过伪类+渐变实现了左右半透明的滚动列表