小程序-实现类似新浪头条新闻上下间歇性滚动
作者 | 随笔川迹
ID | suibichuanji
前言
撰文:川川
您将在读完本篇后get到
在小程序中如何实现一类似新浪头条上下间歇性滚动效果
利用
swiper实现垂直间歇性上下滚动用户名格式化处理,保留姓氏,中间位用*号隐藏
电话号码格式化处理,中间四位特殊处理
显示时间格式化处理
结合小程序云开发完整实现垂直上下间歇性滚动效果
· 正 · 文 · 来 · 啦 ·
01-需求分析
在做用户信息展示页的时候,有时候需要将用户名,联系方式放置在前端展示,但是用户名与电话号码属于私密信息,需要做加密处理
这里的加密只是用于在前端展示特殊处理,也就是只显示姓,名字用特殊字符替代,电话号码:中间四位用*替代,如下效果展示如下所示
02-完成最终效果
（扫码即可体验,用户名,电话,时间格式化处理显示）
03-实现方式
主要借助的是小程序官方提供的 swiper组件,对于横向的,普通的轮播,很多小伙伴都不陌生
但是对于这种垂直方式的滚动,有些同学,可能会比较棘手
04-完成页面布局
以下是wxml示例代码
预约用户
{{item.username}}
{{item.phonenumber}}
已预约
{{item.createtime}}
这里主要借助的是 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-电话号码格式化处理