开发指南

API 文档

步骤4:我的纸条页面设计

最近更新时间:2022-01-26 13:02:20

本文主要围绕我的纸条前端页面 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. 用户上传的图片可在云开发控制台 > 存储 > 存储管理页面中获取。
目录