微信小程序留言板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;
}
相关推荐
mon_star°1 小时前
瑜伽馆会员约课小程序页面功能梳理
小程序
卷Java1 小时前
用户权限控制功能实现说明
java·服务器·开发语言·数据库·servlet·微信小程序·uni-app
知识分享小能手13 小时前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发
小咕聊编程13 小时前
【含文档+PPT+源码】基于微信小程序的在线考试与选课教学辅助系统
微信小程序·小程序·毕业设计·教学辅助系统
一匹电信狗14 小时前
【MySQL】数据库基础
linux·运维·服务器·数据库·mysql·ubuntu·小程序
知识分享小能手15 小时前
微信小程序入门学习教程,从入门到精通,微信小程序开发进阶(7)
前端·javascript·学习·程序人生·微信小程序·小程序·vue3
2501_9159090617 小时前
iOS 抓包工具有哪些?实战对比、场景分工与开发者排查流程
android·开发语言·ios·小程序·uni-app·php·iphone
软希网分享源码1 天前
WIFI大师小程序4.1.9独立版源码(源码下载)
小程序·wifi大师小程序
说私域1 天前
互联网新热土视角下开源AI大模型与S2B2C商城小程序的县域市场渗透策略研究
人工智能·小程序·开源
小咕聊编程1 天前
【含文档+PPT+源码】基于微信小程序的关爱老年人在线能力评估系统
微信小程序·小程序·毕业设计·老人能力评估