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

通(tong)過偽類(lei)+漸變實現(xian)左右(you)半(ban)透明的滾動列表，微信(xin)小程序(xu)同(tong)樣也適用(yong)，漸變的兼(jian)容性不(bu)太(tai)好，所以我們需要針對不(bu)同(tong)的瀏覽器(qi)寫不(bu)同(tong)的代碼。

靜態頁面

首先先寫個(ge)靜態頁面

<div class="my-list">
    <ul>
        <li>左右半透明</li>
                <li>滾動列表</li>
                <li>左右半透明</li>
                <li>滾動列表</li>
                <li>偽類</li>
                <li>漸變</li>
                <li>內容</li>
    </ul>
</div>

如(ru)果是(shi)微(wei)信小程序(xu)，類似的寫一(yi)個

<scroll-view class="my-list" 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));
}

其中(zhong) .my-list:after,.my-list:before 中(zhong) width 控制左右半透明(ming)的長度(du)，根據需求更(geng)改

 如(ru)此便通過偽類(lei)+漸變(bian)實現了左右半(ban)透明(ming)的滾動列表