微信小程序 一键已读功能实现

页面展示效果如图

        需求：点击全部标记已读 样式改变 按钮‘全部标记已读’以及右上角条数消失

                  右上角条数显示实际未读条数 当未读大于99条时 显示···

页面布局.wxml

<view class="container ">
    <view class="center">
        <view class="center-left">
            <view class="center-message" wx:if="{{unreadSum  != 0}}">{{unreadSum>99?"···":unreadSum}}</view>
            消息中心
        </view>
        <view class="center-right">
            <view  bindtap="changeRead">标记已读</view>
        </view>
    </view>
    <view class="card-type {{ finishSrceen ? 'f-header1' : '' }}">
        <!-- 滑动区域 -->
        <scroll-view class="card-scroll" scroll-y="{{true}}" style="--height:{{capsule.navbarHeight}}px;--top:{{capsule.navbarTop}}px;" bindscrolltolower="scrollToLower" lower-threshold='1'>
            <view class="notify-box" wx:for="{{tabList}}" wx:key="index" data-index='{{index}}' bindtap="notifyBtn">
                <view class="notify-box-min" >
                    <view class="notify-box-left" >
                     <view class="notify-box-message" wx:if="{{item.read != true}}">1</view>
                     <image src="../../image/3.png" mode="widthFix" />
                    </view>
                    <view class="notify-box-conter">
                        <view class="notify-box-conter-tit">{{item.name}}</view>
                        <view class="notify-box-conter-tit1">订单号：{{item.order}}</view>
                        <view class="notify-box-conter-tit2">{{item.schedule}}</view>
                    </view>
                    <view class="notify-box-right">{{item.time}}</view>
                </view>
            </view>
            <view style="height: 70rpx;"></view>
        </scroll-view>
    </view>
</view>

页面样式.wxss

.card-type {
    width: 656rpx;
    overflow: hidden;
}

.card-scroll {
    width: 656rpx;
    height: calc(100vh - 168rpx - var(--top) - var(--height));
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
    display: none;
}

.containers {
    /* height: 100vh; */
    width: 100vw;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.center {
    width: 656rpx;
    height: 90rpx;
    margin:50rpx 0 50rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.center-left{
    font-size: 34rpx;
    font-weight: 700;
    color: #000000;
    height: 90rpx;
    width: 164rpx;
    position: relative;
    display: flex;
    align-items: center;
}

.center-message {
    position: absolute;
    top: 14rpx;
    right: 0;
    height: 28rpx;
    width: 28rpx;
    background: red;
    border-radius: 50%;
    color: #fff;
    font-size: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-right {
    color: #654B96;
}

.notify-box {
    width: 656rpx;
    height: 172rpx;
    background: #654B96;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 38rpx;
}

.notify-box-min {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    width: 590rpx;
    display: flex;

}

.notify-box-left {
    height: 90rpx;
    width: 90rpx;
    border-radius: 4rpx;
    position: relative;
}

.notify-box-left image {
    height: 90rpx;
    width: 90rpx;
    flex-shrink: 0;
    border-radius: 4rpx;
}

.notify-box-message {
   height: 28rpx;
   width: 28rpx;
   background: red;
   border-radius: 50%;
   color: #fff;
   font-size: 20rpx;
   position: absolute;
   right: -12rpx;
   top: -12rpx;
   display: flex;
   align-items: center;
   justify-content: center;
}

.notify-box-conter {
    height: 90rpx;
    width: 300rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
}

.notify-box-conter-tit {
   font-size: 22rpx;
}

.notify-box-conter-tit1 {
    font-size: 16rpx;
 }

 .notify-box-conter-tit2 {
    font-size: 18rpx;
    color: #D9D9D9;
 }

.notify-box-right{
  height: 90rpx;
  width: 140rpx;
  color: #D9D9D9;
  font-size: 18rpx;
  margin-top: 10rpx;
  display: flex;
  justify-content: center;

}

页面实现逻辑.js

import {
    config
} from "../../utils/config";
const {
    base_api_url,
    base_img_url
} = config
import {
    formatNum
} from '../../utils/functiontools/util';
import {

} from '../../utils/https/api';
const app = getApp()
Page({

    /**
     * 页面的初始数据
     */
    data: {
        base_img_url,
        smallSrceen: false,
        finishSrceen: false,
        showTips: false,
        toastTips: '',
        capsule: {},

        tabList: [{
            name: 'XXXXX店',
            order: '222222',
            time: '10:30',
            schedule: '商家单',
            read: false
        },{
            name: 'XXXX站',
            order: '222222222222',
            time: '11',
            schedule: '骑到店',
            read: true
        }],
         // 未读条数
         unreadSum: 0,
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {


        this.getUnread()
    },

     // 获取未读条数
     getUnread() {
        let sum = 0
        this.data.tabList.map((n) => {
            if (n.read !== false) return
            sum += 1
        })
        this.setData({ unreadSum: sum })
    },
    // 标记已读
    changeRead() {
        const a = this.data.tabList.map((n) => {
            return { ...n, read: true }
        })
        this.setData({ tabList: a })
        this.getUnread()
    },

    // 点击进入消息通知
    notifyBtn (e){
        console.log(e.currentTarget.dataset.index)
        let tabList = this.data.tabList[e.currentTarget.dataset.index]
        this.data.tabList[e.currentTarget.dataset.index].read = true
        this.getUnread()
        this.setData({
            tabList:this.data.tabList
        })
      
    },

  

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },




    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})