小程序页面效果--如何实现滚动列表左右半透明
为了更好的体验左右滑动,而且更加美观,我们常常会做如下效果:
通过伪类+渐变实现左右半透明的滚动列表,微信小程序同样也适用,渐变的兼容性不太好,所以我们需要针对不同的浏览器写不同的代码。
静态页面
首先先写个静态页面
<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 控制左右半透明的长度,根据需求更改
如此便通过伪类+渐变实现了左右半透明的滚动列表
电话咨询
在线咨询
QQ咨询
官方微信
TOP