前言
作为一个从来没接触过小程序的菜鸟，上手一个小程序就是第一次独立开发微信小程序，各种东西不大熟悉，踩了很多坑。不禁纳闷，我明明可以靠颜值吃饭，为什么还得靠实力 ，咳咳，废话少说，现在有一个需求，就是要在动态渲染出来的消息列表中，给每一条未读消息添加小红点，点击阅读后小红点消失，然后再返回消息页面后，点击过的消息的小红点消失。
所谓菜鸟程序员自然是面向百度编程，ahhh。只不过百度搜到的都是不符合自己需求的，比如有什么未读消息给一个角标提示的，总之搜了老半天没有自己想要的那种，只能自己硬着头皮慢慢来。
实现步骤
wxml页面：
1.先把页面需要渲染的数据列表写出来 ，就是微信小程序的循环遍历。将view用样式调节成小红点样
<view>
<!-- 外层view -->
<view class='out' id="{{item.id}}" wx:for="{{item}}" wx:key="unique" bindtap='viewDetails' data-buildId="{{item.buildId}}" data-status="{{item.status}}">
<!-- 列表上方的view-->
<view class="top">
<text id="t-id">{{item.buildId}}</text>
<image id="addimg" src="./img/address.png"></image>
<text id="t-name">{{item.buildName}}</text>
<!-- 放在列表上方view中的小红点 -->
<view class="dian"></view>
</view>
<!-- 列表下方的view-->
<view class="down">
<text id="t-fault">故障数量：{{item.fault}}</text>
<text id="time">时间：{{item.time}}</text>
</view>
</view>
</view>
2.这里的小圆点是一直显示的，那我怎么将小圆点根据后台返回来的数据进行显示和隐藏呢？经过翻看微信小程序的api ,在这里我用了wx:if 和wx:else的方式控制小圆点的显示隐藏。
在此强调：wx:if 是为1时所渲染的情况，wx:else是为0 时所渲染的情况。
前期因为没注意，所以导致出现小圆点不显示的局面。后台的大佬给的接口说 status为1，用户已读；status为0，用户未读。那好，我就用status == 1 时，设置一个小圆点隐藏的样式，同样 status==0时，设置一个显示的样式。
<view wx:if="{{item.status == 1}}" class="dian_hide"></view>
<view wx:else ="{{item.status == 0}}" class="dian_show"></view>
将上面代码替换第一步中小圆点的代码即可。
3.写一下样式。
wxss
.top {
height: 70rpx;
line-height: 70rpx;
color: #949494;
background-color: #ebebeb;
font-size: 30rpx;
}
#addimg {
width: 25rpx;
height: 30rpx;
margin-left: 61rpx;
}
#t-id {
margin-left: 24rpx;
}
#t-fault {
margin-left: 24rpx;
}
#t-name {
margin-left: 12rpx;
}
.dian_show {
float: right;
width: 16rpx;
height: 16rpx;
background-color: red;
border-radius: 50%;
margin-right: 25rpx;
margin-top: 25rpx;
}
.dian_hide {
float: right;
width: 16rpx;
height: 16rpx;
background-color: red;
border-radius: 50%;
margin-right: 25rpx;
margin-top: 25rpx;
display: none;
}
.down {
height: 90rpx;
line-height: 90rpx;
color: #6b6b6b;
font-size: 32rpx;
}
#time {
margin-left: 200rpx;
overflow: hidden;
}
/*隐藏 */
.hide {
display: none;
}
/*显示 */
.show {
display: block;
}
4.接下来就是js啦，无非就是请求接口请进渲染，点击任意一条再发送请求告诉后台服务器这条消息本大爷已经看过了！你就改变他的状态就好了.
注意一点：要想实现点击查看后返回页面小红点消失，一定要在onShow函数中调用一次渲染的方法哦！
Page({
/**
* 页面的初始数据
*/
data: {
item: [], //渲染的列表
current: 1, //请求的页码
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.renderList() //调用渲染方法
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
this.renderList() //调用渲染方法
},
// 渲染数据方法
renderList: function() {
var that = this
var a = wx.getStorageSync('key')
wx.request({
url: '你的地址',
data: {
//你需要传的参数
page: that.data.current
},
method: 'post',
header: {
"content-type": "applocation/json"
},
success: function(res) {
console.log(res.data.userMsgList)
that.setData({
item: res.data.userMsgList
})
}
})
},
// 点击任意一条消息后小圆点消失
viewDetails: function(e) {
console.log(e)
var that = this
console.log(e.currentTarget.id)
//发送请求给后台，告诉他用户点击的这条消息状态要改变
wx.request({
url: '你的地址',
method: "POST",
data: {
id: e.currentTarget.id
},
header: {
'content-type': 'application/json' // 默认值
},
success: function(res) {
console.log(res)
//页面跳转：
wx.navigateTo({
url: '你要跳转页面的地址’
})
}
})
this.renderList() //调用渲染方法
},
})
效果图
点击前未读消息显示小红点：
点击任意一条消息后进入下一页面
返回之后，点击的消息列表的小红点已经消失，其他未点击的地方还有。
总结
小程序说难也不难，就是很多规则限制必须根据他的来，第一次开发小程序，很多地方也做的不好，希望大家看到这篇博客 能学习最好，有啥问题也希望指正出来，谢谢大家！