基础布局组件(微信小程序)

Posted 2021-11-22 So istes immer

目录

1.view标签

类似于html里面的div标签，块级元素

2.text标签

3.image标签

<view class="box" hover-class="boxHover">天下我有</view>
<text>人生苦短，去日苦多</text>
<image src="/images/pic.jpeg" mode="aspectFit" show-menu-by-longpress></image>

.box {
  width: 100px;
  height: 100px;
  background-color: gold;
  margin-right: 2px;
  flex: 0 0 100px;
}

.boxHover {
  background-color: red;
}

image {
  width: 100%;
}

 

4.button标签

<button type="primary" class="btn" plain>登录</button>
<button type="default" class="btn" size="mini" >提交</button>
<button type="warn" class="btn">退出登录</button>
<button type="primary" class="btn" loading>加载中</button>

.btn {
  margin: 5px;
}

5.scroll-view标签

做滚动视图的

index.wxml 

<scroll-view scroll-x scroll-left="100">
  <view class="scrOut">
    <view class="box">1111</view>
    <view class="box">2222</view>
    <view class="box">3333</view>
    <view class="box">4444</view>
    <view class="box">5555</view>
  </view>
</scroll-view>

<scroll-view scroll-y scroll-top="100">
  <view class="scrOut2">
    <view class="box2">1111</view>
    <view class="box2">2222</view>
    <view class="box2">3333</view>
    <view class="box2">4444</view>
    <view class="box2">5555</view>
  </view>
</scroll-view>

index.wxss 

.box {
  width: 100px;
  height: 100px;
  background-color: gold;
  margin-right: 2px;
  flex: 0 0 100px;
}

.scrOut {
  border: 1px solid rgb(128, 0, 6);
  display: flex;
  flex-wrap: nowrap;
}

.box2 {
  width: 100%;
  height: 100px;
  background-color: pink;
  margin-bottom: 1px;
}

.scrOut2 {
  height: 380px;
  border: 1px solid rgb(128, 0, 6);
}

6.icon标签

做图标的

<view style="text-align: center;padding: 50px;">
  <icon type="success" size="30"></icon>
  <view>提交成功，谢谢您的配合！</view>
</view>

 

7.progress标签

做进度条的

<view style="padding: 50px;">
  <progress percent="60" show-info font-size="16px" border-radius="10" activeColor="pink" backgroundColor="#eee" active></progress>
</view>

 

 8.form标签

<form bindsubmit="onSubmit">
  <input class="ipt" placeholder="请输入用户名" auto-focus></input>
  <button form-type="submit">提交</button>
</form>

.ipt {
  border: 1px solid black;
  padding: 0 10px;
}

9.swiper标签

滑块容器，可用来做轮播图 

<swiper class="banner" indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" autoplay interval="3000" circular>
  <swiper-item>
    <image src="/images/1.jpeg" mode="widthFix"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/2.jpeg" mode="widthFix"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/3.jpeg" mode="widthFix"></image>
  </swiper-item>
</swiper>

.banner {
  height: 140px;
  border: 1px solid red;
}
.banner image{
  width: 100%;
}

  

10.navigator标签

类似于a标签，可用于小程序内部的跳转或者小程序之间的跳转

<view>
  <navigator url="/pages/logs/logs">跳转到日志</navigator>
</view>