小程序常用组件

swiper

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

 

 

 小程序利用swiper实现轮播图

案例：

<view class="banner">
    <swiper indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" circular autoplay interval="4000">
      <swiper-item><image src ="/images/banner1.jpg"/></swiper-item>
      <swiper-item><image src ="/images/banner2.jpg"/></swiper-item>
      <swiper-item><image src ="/images/banner3.jpg"/></swiper-item>
    </swiper>
</view>

.banner{width: 100%; height: 295rpx;}
.banner swiper{height: 100%; width: 100%;}
.banner image{width: 100%;height: 295rpx;}

 

navigator

 

 

 

 

 

 

• wx.navigateTo(Object object)

　　保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

• wx.redirectTo

  关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

 

• wx.switchTab

　　跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

 

• wx.reLaunch(Object object)

  关闭所有页面，打开到应用内的某个页面 低版本需做兼容处理。

 

• wx.navigateBack(Object object)

  关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

 

案例：

<view class="header">
    <view class="container hdCon">
      <navigator class="logo" open-type="switchTab" url="/pages/demo/demo">
        <image class="hdPic" mode="heightFix" src="/images/list.png"/>
      </navigator>
    </view>
</view>