微信小程序常用标签-蒲公英云

微信小程序常用标签

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

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

image 标签特性：

<!-- 图片懒加载 -->
  <image class='b_333' lazy-load='{ {true}}' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jpg'></image>
  <!-- binderror事件 -->
  <image class='b_333' binderror='imageErr' src='http://img.zcool.cn/community/012b245544ebd60000019ae93e4e4b.jpg@1280w_1l_2o_100sh.jp'></image>
  <!-- bindload事件是图片加载完成，需要开启图片懒加载 -->
  <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组件

<!-- url ： 当前小程序跳转的页面地址(这个路径我建议是写成绝对路径) open-type ： 跳转方式有下面的值 open-type=navigate : 保留当前页面，跳转到页面内页面（除了tabbar页面，即配置的菜单页面） open-type=redirect : 关闭当前页面，跳转到页面内页面（除了tabbar页面，即配置的菜单页面） open-type=switchTab : 关闭所有非tabar页面，跳转到tabbar页面 open-type=reLaunch : 关闭所有页面，跳转到tabbar页面 open-type=navigateBack : 页面回退（和delta属性一起使用，设置返回层数） 提示：这里只是简单介绍一下，tabbar页面配置还没讲过，先了解这个东西吧，我一般都不用这个组件，习惯用小程序api -->
  <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>