小程序頁面效果--如何實現(xiàn)滾動列表左右半透明

為了更好的體驗左右滑動，而且更加美觀，我們常常會做如下效果： 

通過偽類+漸變實現(xiàn)左右半透明的滾動列表，微信小程序同樣也適用，漸變的兼容性不太好，所以我們需要針對不同的瀏覽器寫不同的代碼。

靜態(tài)頁面

首先先寫個靜態(tài)頁面

<div>

    <ul>

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

                <li>滾動列表</li>

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

                <li>滾動列表</li>

                <li>偽類</li>

                <li>漸變</li>

                <li>內(nèi)容</li>

    </ul>

</div>

如果是微信小程序，類似的寫一個

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

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

            <text>滾動列表</text>

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

            <text>滾動列表</text>

            <text>偽類</text>

            <text>漸變</text>

            <text>內(nèi)容</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 控制左右半透明的長度，根據(jù)需求更改

如此便通過偽類+漸變實現(xiàn)了左右半透明的滾動列表