有奖捉虫:云通信与企业服务文档专题,速来> HOT
本文主要围绕我的纸条前端页面 history.wxml 进行讲解,更多详情请参见 我的纸条前端代码

操作步骤

我放入的纸条页面设计

1. 顶部的我放入的纸条我抽到的纸条通过改变 active 的值来切换 class。
<view class="top_title">
<text class="{{active === true ? 'on': ''}}" bindtap="inBtn">我放入的纸条</text>
<text class="{{active === true ? '': 'on'}}" bindtap="outBtn">我抽到的纸条</text>
</view>

2. 前端 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. 实现交友宣言的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;
}

4. 前端判断是否有数据,没有数据则显示“空空如也”。
<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>


我抽到的纸条页面设计

1. 基本跟我放入的纸条页面相同。多出了微信号的展示位置,交友宣言的行数减少一行。微信号的居中显示:
.outTopDes_2{
color: rgb(62, 88, 238);
text-align: center;
font-size: 35rpx;
}

2. 用户上传的图片可在云开发控制台 > 存储 > 存储管理页面中获取。