小程序页面效果--如何实现滚动列表左右半透明
发布时间:2020-12-14 19:02:35 所属栏目:资源 来源:网络整理
导读:为了更好的体验左右滑动,而且更加美观,我们常常会做如下效果: 通过伪类+渐变实现左右半透明的滚动列表,微信小程序同样也适用,渐变的兼容性不太好,所以我们需要针对不同的浏览器写不同的代码。 静态页面 首先先写个静态页面 div class = "my-list" ul l
为了更好的体验左右滑动,而且更加美观,我们常常会做如下效果: 通过伪类+渐变实现左右半透明的滚动列表,微信小程序同样也适用,渐变的兼容性不太好,所以我们需要针对不同的浏览器写不同的代码。 静态页面首先先写个静态页面 <div class="my-list">
<ul>
<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>
</scroll-view>
css然后写css .my-list:after,:before {
display: block;
content: "";
position: absolute;
z-index: 1;
top: 0;
height: 100%;
width: 20%
}
left: 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));
-moz-linear-gradient(left,0);">linear-gradient(90deg,0));
}
:after {
right: -webkit-linear-gradient(right,0);">-moz-linear-gradient(right,0);">linear-gradient(270deg,0));
}
其中? 如此便通过伪类+渐变实现了左右半透明的滚动列表 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |