微信小程序留言板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;
}
相关推荐
Azhao11061 小时前
小程序购物车结算体验优化详解:从入门到实战全攻略
小程序
Haibakeji2 小时前
拼团小程序定制开发适合哪些行业
小程序·软件需求
2501_915918413 小时前
iOS性能数据监控:从概念到工具实践,让应用运行更流畅
android·macos·ios·小程序·uni-app·cocoa·iphone
silvia_Anne3 小时前
微信小程序(组件通讯和全局数据共享)
微信小程序·小程序
i220818 Faiz Ul4 小时前
个人健康系统|健康管理|基于java+Android+微信小程序的个人健康系统设计与实现(源码+数据库+文档)
android·java·vue.js·spring boot·微信小程序·毕设·个人健康系统
博客zhu虎康15 小时前
小程序:实现下拉刷新和上拉加载更多功能
小程序
2501_9159090619 小时前
全面解析前端开发中常用的浏览器调试工具及其使用场景
android·ios·小程序·https·uni-app·iphone·webview
云起SAAS1 天前
企业名片画册相册微信小程序源码 | 管理后台+后端 | 含产品展示资讯视频
微信小程序·广告联盟·企业名片画册相册微信小程序源码
王者鳜錸1 天前
企业解决方案十一-各类小程序定制开发
图像处理·人工智能·小程序·大模型·语音处理·定制开发
px不是xp1 天前
Docker部署Qdrant向量数据库,初始化向量数据库,重构RAG逻辑
数据库·docker·微信小程序·重构·qdrant