微信小程序——常用标签

一.轮播图的实现

swiper+swiper-item实现轮播，navigator实现轮播图的跳转

  <!-- 首页的轮播图 -->
  <!-- 标签属性依次对应：自动播放，圆点，循环播放，轮播间隔 -->
  <swiper autoplay indicator-dots circular interval="3000">
    <swiper-item>
      <!-- navigator 跳转底部tab -->
      <navigator url="/pages/login/login" open-type="switchTab">
        <image src="/images/temp/banner1.jpg"></image>
      </navigator>
    </swiper-item>
    <swiper-item>
      <!-- 跳转url -->
      <navigator url="/pages/detail/detail?id=2">
        <image src="/images/temp/banner2.jpg"></image>
      </navigator>
    </swiper-item>
  </swiper>

二.for循环

item为每次拿到的循环变量
image标签：mode=“widthFix” 设置图片高度自适应

  <view class="product" wx:for="{{productList}}" wx:key="index">
    <navigator url="/pages/detail/detail?id={{item.id}}">
      <!-- mode="widthFix" 设置图片高度自适应 -->
      <image src="{{item.src}}" mode="widthFix"></image>
    </navigator>
    <text>{{item.name}}</text>
    <text>￥{{item.price}}</text>
  </view>

三、详情页高度锁定

scroll-view标签：支持滚动的容器，可以设置固定的高度，从而支持下方按钮的绝对定位

<scroll-view scroll-y>
  <text class="title">产品详情</text>
  <swiper autoplay circular indicator-dots>
    <swiper-item>
      <video src="。。。"></video>
    </swiper-item>
    <swiper-item>
      <image src="/images/mate30pro01.jpg" mode="widthFix"></image>
    </swiper-item>
  </swiper>
</scroll-view>

<!-- 需要始终固定在下方的按钮组，css设置绝对定位 -->
<view class="bottom">
  <button bindtap="addCart">加入购物车</button>
  <!-- 事件传参 -->
  <button bindtap="addCart" data-buy="true">立即购买</button>
</view>

scroll-view{
  height: 100vh;
}
.bottom{
  display: flex;
  width: 100%;
  background-color: rgb(250, 105, 226);
  /* 使用绝对定位，让按钮始终显示在页面的下方 */
  position: absolute;
  left: 0;
  bottom: 0;
}

四、input

<input placeholder="请输入手机号" type="number" bindblur="getPhone"></input>

参考：https://www.bilibili.com/video/av70298792