本文主要围绕我的纸条前端页面 history.wxml 进行讲解，更多详情请参见 我的纸条前端代码。
操作步骤
我放入的纸条页面设计
- 顶部的“我放入的纸条”与“我抽到的纸条”通过改变 active 的值来切换 class。
<view class="top_title">
<text class="{{active === true ? 'on': ''}}" bindtap="inBtn">我放入的纸条</text>
<text class="{{active === true ? '': 'on'}}" bindtap="outBtn">我抽到的纸条</text>
</view> - 前端 for 循环出每个数据进行展示。dataList 为在数据库查出来的数据，指明
wx:key。在删除时需要数据的<view class="put"
wx:for="{{dataListPut}}"
wx:key="_id"
>
<view class="putTop">
<view class="putTopImg">
<image src="{{item.picture}}"></image>
</view>
<view class="putTopDes">
<text>交友宣言:</text>{{item.des}}
</view>
</view>
</view>_id，所以需要配合 JS 进行传递参数：data-id="{{item._id}}"。通过<view class="putBottom">
<text>{{schoolList[item.location]}}</text>
<text>{{item.sex == 1? '男': '女'}}</text>
<text class="putBottomDelete" bindtap="deletePut" data-id="{{item._id}}">删除 !</text>
</view>e.target.dataset.id获取到传递过来的参数。deletePut: function(e){
const that = this
const _id = e.target.dataset.id - 实现交友宣言的3行，超出则用省略号展示。
.outTopDes_1{
height: 15vh;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-all;
} - 前端判断是否有数据，没有数据则显示“空空如也”。
<view class="kong" wx:if="{{active === true? true: false}}" hidden="{{dataListPut.length == 0 ? false: true}}">空空如也</view>
<view class="kong" wx:else hidden="{{dataListOut.length == 0 ? false: true}}">空空如也</view>
我抽到的纸条页面设计
- 基本跟“我放入的纸条”页面相同。多出了微信号的展示位置，交友宣言的行数减少一行。微信号的居中显示：
.outTopDes_2{
color: rgb(62, 88, 238);
text-align: center;
font-size: 35rpx;
} - 用户上传的图片可在云开发控制台 > 存储 > 存储管理页面中获取。
