小程序-实现类似新浪头条新闻上下间歇性滚动

作者 | 随笔川迹

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-电话号码格式化处理