微信小程序常用标签

心已赠人 2022-12-10 09:00 286阅读 0赞

1.  view 这个标签相当于div(它的特点就是在没有其他样式影响的情况下，宽度100%)；
2.  text 这个标签相当于span(它的特点就是在没有其他样式影响的情况下，不会独占一行，宽和高由内容撑开，这个时候你设置宽高是没有用的)；
3.  image 这个标签比较重要，图片组件。src里面可以放网络地址和本地图片地址。
4.  button 这个是按钮组件。
5.  input 这个是输入框组件。
6.  navigator 这个是导航组件。

#### image 标签特性： ####

<image class='b_333' lazy-load='{ {true}}' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jpg'></image>
    
      
      <image class='b_333' binderror='imageErr' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jp'></image>
    
      
      <image class='b_333' lazy-load='{ {true}}' bindload='imageLoad' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jpg'></image>
    </view>
    
    /* 图片标签样式 */
    .b_333 {
      margin-top: 20rpx;
      border: 1rpx solid #333;
    }
    
      imageErr: function(e) { //  图片加载错误
        console.log("图片加载错误")
        console.log(e);
      },
      imageLoad: function(e) { //  图片加载完成
        console.log("图片加载完成")
        console.log(e);
      }

#### navigator组件 ####

<navigator open-type='navigate' url='/pages/index/index'>跳转</navigator>
      <navigator open-type='redirect' url='/pages/index/index'>跳转</navigator>
      <navigator open-type='switchTab' url='/pages/index/index'>跳转</navigator>
      <navigator open-type='reLaunch' url='/pages/index/index'>跳转</navigator>
      <navigator open-type='navigateBack' delta="1">跳转</navigator>