美文网首页
uni-app系列(三)

uni-app系列(三)

作者: 笑红尘123 | 来源:发表于2019-12-21 19:05 被阅读0次

    文章内容:uni-app生命周期和模版语法

    uni-app 支持如下页面生命周期函数:
    onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为object(用于页面传参),参考示例
    onShow 监听页面显示
    onReady 监听页面初次渲染完成
    onHide 监听页面隐藏
    onUnload 监听页面卸载
    onPullDownRefresh 监听用户下拉动作
    onReachBottom 页面上拉触底事件的处理函数
    onShareAppMessage 用户点击右上角分享 微信小程序
    onPageScroll 监听页面滚动
    onTabItemTap 当前是 tab 页时,点击 tab 时触发。

    <script>
    export default {
     data: {
      msg: 'Hello'
     },
     onLoad:function(options){
      console.log("onLoad");
     },
     onHide:function(){
      console.log("onHide");
     },
     onShow:function(){
      console.log("onShow");
     }
    }
    </script>
    

    数据绑定
    变量赋值

    <script>
    export default {
     data: {
      title: 'Hello',
     }
    </script>
    

    视图渲染数据:

    <template>
     <view class="content">
      <view>
       {{title}}
      </view>
     </view>
    </template>
    

    数组形式的数据绑定:

    <tamplate>
           <view>
                 {{list[0]['name']}}
                 {{list[0].name}}
           </view>
    </template>
    <script>
        export default{
             data: {
                    list : [
                           {name : "张三", age : 18},
                           {name : "李四", age : 20}
                      ]
     }, 
        }
    </script>
    

    相关文章

      网友评论

          本文标题:uni-app系列(三)

          本文链接:https://www.haomeiwen.com/subject/rsjunctx.html