uniapp留言板的代码

UniApp是一个跨平台的前端框架，用于构建一次编写、多端运行的应用。在UniApp中创建一个留言板功能，可以通过Vue.js模板和组件化的方式来实现。以下是一个简单的留言板组件代码示例：

<template>
  <view class="message-board">
    <scroll-view ref="scrollView" class="scroll-view">
      <block v-for="(item, index) in messages" :key="index">
        <view class="message-item">
          <text>{{ item.name }}:</text>
          <text>{{ item.content }}</text>
        </view>
      </block>
      <!-- 添加留言区域 -->
      <view class="leave-message-form">
        <input placeholder="请输入留言" type="textarea" v-model="newMessage.content" @input="checkLength" />
        <button @click="submitMessage">提交</button>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messages: [], // 存储已有的留言数组
      newMessage: { content: '' }, // 新留言对象
    };
  },
  methods: {
    submitMessage() {
      if (this.newMessage.content.length > 0) {
        this.messages.push(this.newMessage);
        this.$refs.scrollView.scrollToBottom(); // 滚动到底部
        this.newMessage.content = ''; // 清空输入框
      }
    },
    checkLength(e) {
      if (e.detail.value.length > 100) {
        alert('留言长度不能超过100字符');
        e.detail.value = e.detail.value.slice(0, 100); // 限制长度
      }
    },
  },
};
</script>

<style scoped>
.message-board {
  border: 1px solid #ccc;
  padding: 10px;
}

.message-item {
  margin-bottom: 10px;
}
</style>

在这个示例中，我们定义了一个`message-board`视图，包含滚动列表展示已有的留言和一个表单区域供用户输入新留言。`submitMessage`方法处理提交操作，`checkLength`方法检查内容长度。