用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2020-2-6 00:56

为了更好的体验左右滑动,而且更加美观,我们常常会做如下效果:通过伪类+渐变实现左右半透明的滚动列表,微信小程序同样也适用,渐变的兼容性不太好,所以我们需要针对不同的浏览器写不同的代码。静态页面首先先写 ...

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

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

静态页面

首先先写个静态页面

<div class="my-list">
    <ul>
        <li>左右半透明</li>
                <li>滚动列表</li>
                <li>左右半透明</li>
                <li>滚动列表</li>
                <li>伪类</li>
                <li>渐变</li>
                <li>内容</li>
    </ul>
</div>

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

<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));
}

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

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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: Vien 来自: VienBlog