微信小程序留言板2

wxml:

html 复制代码
<!--pages/pinglun/pinglun.wxml-->
<mydiv1 bind:myfu="ping"></mydiv1>
<view class="vi1" wx:for="{{arr}}">
<image style="width:60px;height:60px;margin-top:10px;margin-left: 10px;border-radius: 50%;float: left;" src="https://c-ssl.dtstatic.com/uploads/blog/202401/26/aLSOzpP5T0Bm9BD.thumb.1000_0.jpeg"/>
<text style="float: left;margin-top: 20px;margin-left: 10px;">{{item}}</text>
</view>

wxjs:

javascript 复制代码
// pages/pinglun/pinglun.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
  arr:[]
  },
  ping(e){
    // console.log(e.detail);
          let arrlist=this.data.arr
          arrlist.unshift(e.detail)
          this.setData({
            arr:arrlist
          })
          console.log(this.data.arr);
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

wxss:

css 复制代码
.vi1{
  width: 700rpx;
  height: 80px;
  background: rgb(243, 239, 239);
  border-radius: 10px;
  margin: auto;
  margin-bottom: 15px;
}
相关推荐
FX1317887KP_3 小时前
从KET到PET口语进阶:词汇量翻倍后,口语如何跟上?
小程序·ket口语·pet口语·fce备考·剑桥英语
m0_587383004 小时前
工业场景设备维修维护实战技巧 全流程标准化落地与常见问题排查指南
java·spring·小程序·架构·需求分析
m0_587383001 天前
深圳 24 小时自助健身房系统软件开发实战指南与案例解析
java·spring boot·小程序·架构·需求分析
2501_915909061 天前
iOS应用从开发到上架App Store的完整发布流程与步骤指南
android·ios·小程序·https·uni-app·webview
扶风ff1 天前
练题簿在线免费刷题:会员线下组卷、Word 试卷与成绩导入,课堂检测更方便
java·开发语言·算法·小程序·word
镭封1 天前
做电视剧解说视频用什么软件?配音、文案处理一次解决
人工智能·小程序·音视频·语音识别·媒体
闹小艾1 天前
制作题库练题小程序如何选择搭建平台?3大主流平台优缺点,新手选型不踩坑
小程序
小码哥0681 天前
陪诊小程序系统开发:开启医疗陪护新时代
小程序·陪诊·陪护·陪诊陪护·医院陪诊系统·陪诊系统·陪诊管理
扶风ff1 天前
练题簿在线免费刷题:创建个人任务,把刷题、听题和模考目标放到每天的学习中
开发语言·javascript·学习·小程序