微信小程序----组件之text_小程序 view 套 text-优快云博客

本文链接：https://blog.youkuaiyun.com/zhaihaohao1/article/details/77816883

本文介绍了一个小程序中的按钮交互案例，通过按钮实现文本内容的增删操作，并提供了完整的wxml、wxss及js代码，便于读者理解和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/component/

根据文档写代码

效果图：

项目结构：

核心代码：

index.wxml

<view class="btn-area">
  <view class="body-view">
    <text>{{text}}</text>
    <button bindtap="add">add line</button>
    <button bindtap="remove">remove line</button>
  </view>
</view>

index.wxss

.btn-area{
  background-color: yellow;
}
.body-view{
  background-color: green;
}

index.js

var initData = 'this is first line\nthis is second line'
var extraLine = [];

Page({

  /**
   * 页面的初始数据
   */
  data: {
    text: initData
  },
  add: function (e) {
    extraLine.push('other line')
    this.setData({
      text: initData + '\n' + extraLine.join('\n')
    })
  },
  remove: function (e) {
    if (extraLine.length > 0) {
      extraLine.pop()
      this.setData({
        text: initData + '\n' + extraLine.join('\n')
      })
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

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

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

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

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

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

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

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

源码下载：
http://download.youkuaiyun.com/download/zhaihaohao1/9962142