作者 | 随笔川迹

ID | suibichuanji

前言

撰文:川川

您将在读完本篇后get到

在小程序中如何实现一类似新浪头条上下间歇性滚动效果

• 利用 swiper实现垂直间歇性上下滚动

• 用户名格式化处理,保留姓氏,中间位用*号隐藏

• 电话号码格式化处理,中间四位特殊处理

• 显示时间格式化处理

• 结合小程序云开发完整实现垂直上下间歇性滚动效果

·  正  ·  文  ·  来  ·  啦  ·

01-需求分析

在做用户信息展示页的时候,有时候需要将用户名,联系方式放置在前端展示,但是用户名与电话号码属于私密信息,需要做加密处理

这里的加密只是用于在前端展示特殊处理,也就是只显示姓,名字用特殊字符替代,电话号码:中间四位用*替代,如下效果展示如下所示

02-完成最终效果

（扫码即可体验,用户名,电话,时间格式化处理显示）

03-实现方式

主要借助的是小程序官方提供的 swiper组件,对于横向的,普通的轮播,很多小伙伴都不陌生

但是对于这种垂直方式的滚动,有些同学,可能会比较棘手

04-完成页面布局

以下是wxml示例代码

<view class="order-list-wrap"><view class="order-title"><text>预约用户</text></view><swiper class="swiper" vertical="true" autoplay="true" circular="true" interval="3000" display-multiple-items='4'><block wx:for="{{ orderLists }}" wx:key="*this"><swiper-item><view class="swiper-item-box"><view class="username">{{item.username}}</view><view>{{item.phonenumber}}</view><view>已预约</view><view>{{item.createtime}}</view></view></swiper-item></block></swiper>
</view>

这里主要借助的是 swiper组件

• vertical的属性值为 true,代表的是垂直方向

• display-multiple-items表示的是同时显示的滑块数量,这里设置的是显示 4 个

swiper组件中各个属性含义,具体可看参考文档swiper 组件使用

如下是 wxss

.order-list-wrap {padding: 10rpx 0 10rpx 0;font-size: 28rpx;background:#23d5ab;margin: 0 20rpx 20rpx 20rpx;color: #fff;}.order-title {text-align: center;padding: 8rpx;
}.swiper {height: 320rpx;overflow:hidden;
}.swiper-item-box {display: flex;justify-content: space-around;border-bottom: 1px dashed #ede1d4;
}.swiper-item-box view {line-height: 80rpx;
}.swiper-item-box .username {width: 90rpx;
}

如下预约列表的数据格式

orderLists: [{phonenumber:15210927743,username:"杨海龙",createtime:"2020-06-17T07:54:41.146Z"},{createtime:"2020-06-18T13:35:02.944Z",phonenumber:13141467811,username:"洋洋"},{createtime:"2020-06-18T14:18:51.307Z",phonenumber:"15210927639",username:"郑霞"},{phonenumber:13801135148,username:"王海勇",createtime:"2020-06-17T07:53:34.584Z"},{createtime:"2020-06-17T09:28:47.062Z",phonenumber:15810923375,username:"向生明"}]

如果仅仅是这样,在页面中,姓名和电话号码会完全被显示,但是往往我们需要对姓名和电话进行特殊处理的

而这里的时间是从服务器返回给前端的时间,仍然需要做处理,进行转化

05-用户名格式化处理-保留姓氏

如下示例代码所示

// 格式化名字,只留姓,名字中间用*替代
function _formatName(name) {let newStr;if (name.length === 2) {newStr = name.substr(0, 1) + '*'; // 通过substr截取字符串从第0位开始截取,截取1个} else if (name.length > 2) { // 当名字大于2位时let char = '';for (let i = 0, len = name.length - 2; i < len; i++) { // 循环遍历字符串char += '*';}newStr = name.substr(0, 1) + char + name.substr(-1, 1);} else {newStr = name;}return newStr;
}console.log(_formatName("李海涛")) // 输出李*涛

06-电话号码格式化处理