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

发布时间:2025-04-08 11:26 浏览次数:348

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


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


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


静态页面


首先先写个静态页面



   


           

  • 左右半透明

  •                

  • 滚动列表

  •                

  • 左右半透明

  •                

  • 滚动列表

  •                

  • 伪类

  •                

  • 渐变

  •                

  • 内容

  •    



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



            左右半透明


            滚动列表


            左右半透明


            滚动列表


            伪类


            渐变


            内容



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 控制左右半透明的长度,根据需求更改


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


小程序开发

腾虎网络持续为企业提供小程序开发,APP开发,软件定制开发,微信开发,OA办公系统,CRM系统,ERP管理系统,公众号开发,金融,教育,商城,医疗,政务小程序开发等互联网业务已经有20年之久,让企业与用户快速连接起来。

关闭

在线留言