微信小程序留言板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;
}
相关推荐
2501_915921432 分钟前
前端开发工具有哪些?常用前端开发工具、前端调试工具、前端构建工具与效率提升工具对比与最佳实践
android·前端·ios·小程序·uni-app·iphone·webview
说私域2 小时前
基于开源AI智能名片、链动2+1模式与S2B2C商城小程序的流量运营与个人IP构建研究
人工智能·小程序·流量运营
weixin_177297220693 小时前
剧本杀小程序系统开发:构建线上线下融合的剧本杀生态圈
小程序·剧本杀
2501_915918418 小时前
HTTPS 端口号详解 443 端口作用、iOS 抓包方法、常见 HTTPS 抓包工具与网络调试实践
android·网络·ios·小程序·https·uni-app·iphone
小蒜学长10 小时前
基于springboot 校园餐厅预约点餐微信小程序的设计与实现(代码+数据库+LW)
数据库·spring boot·微信小程序
cookqq10 小时前
Cursor和Hbuilder用5分钟开发微信小程序
微信小程序·小程序·curosor
老华带你飞11 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
毕设源码-钟学长12 小时前
【开题答辩全过程】以 基于微信小程序的美发服务系统的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
canglingyue13 小时前
微信小程序罗盘功能开发指南
微信小程序·小程序