好像很久没有写代码相关的东西啦 今天给客户程序做开发的时候 对方想要个大厂app或者小程序里用的效果 类似下图红框里的

在顶部幻灯图片进行变化的时候 这个小横条会变化 正在显示的表现为白色横条 还未显示到的就是灰色横条 下午研究了下 本来想努力做成类似 当前图片如果停留4秒 那么就会有4秒的动画 由灰色逐渐填满成白色这样 后来测试了几次 如果向服务端请求数据过来 在进行动画的时候 会出现一些莫名其妙的BUG 可能得后期再完善下 先分享动画效果没有特别强的成片吧 差不多调试好了 可以直接拿代码去用 哦 对了 这个用到了progress[进度条]组件 图省事 直接用的TDesign现成的 TDesign之前很早有提到过 控件不好看？试试TDesign 需要的话可以翻回去看看 下面是代码 先.wxml文件

<t-progress percentage="{{bannerPercent}}" size='10' theme="plump" track-color='#999' stroke-width='2' color='#ffffff'/>

bannerPercent控制了进度条的进程百分比 大概思路是 先获取数据库里总共有多少个首页幻灯 赋值幻灯片数组之后 用100除以数组的length 得出每个当前幻灯需要显示的进度条百分比 如果是4个主题[图片] 那首个百分比就是25% 第二个就是50% 以此类推

//首页幻灯获取 _indexBannerGet() { var that = this, lenVal = that.data.bannerArr.length, interval = 100 / lenVal; that.setData({ bannerPercent: interval, bannerInterval: interval }) }, //广告幻灯移动变化 onSwiperChange(e) { var that = this, currentVal = e.detail.current, interVal = that.data.bannerInterval, percentVal = (currentVal + 1) * interVal;//防止index为0的时候 计算的结果会为0 that.setData({ bannerPercent: percentVal, }) },

ok 算是个简易的版本 真机上的体验也还ok 观感上是实现了 之后如果加了延时动画再来补充一下 毕竟看着更厉害一些 😃