微信小程序----组件之text

来源：互联网发布：高中封闭式管理知乎编辑：程序博客网时间：2024/06/05 06:59

文档地址：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.csdn.net/download/zhaihaohao1/9962142

阅读全文

0 0