微信小程序中的部分容器和组件

1 找到小程序组件的文档           

https://mp.weixin.qq.com/                         

点击上方链接进入微信开放平台，使用昨天文章 中注册账号进行登录

点击文档，会调到组件的页面

2使用文档中的组件

这是本次的一个目录

    1 选择组件，点击左侧视图容器，里边有容器的用法 这里以常用的容器 view  来进行举例 

 在index.wxml中加入代码 

 <view class="container" hover-class="index-view" >
    这是view标签 
  </view>

  这个 hover-class 是点击元素不放松，会使用的一个样式，如我想要在点击不放时，将文字颜色变成红色，可以去 index,wxss 中加入一下样式 

.index-view{
  color:#f12;
}

也可以直接设置class样式 ，由于微信小程序无法使用html标签，可以直接将其看做是div 当成div进行使用 当然对于选择器，小程序也不是完全支持

我们再来看一下轮播图  采用的是 swiper  尝试一下代码

 <swiper>
    <swiper-item>1</swiper-item>
    <swiper-item>2</swiper-item>
    <swiper-item>3</swiper-item>
 </swiper>

发现可以滑动，但是没有面板指示点 也不能自动切换  可以加入 切换速度也可以自己进行调试  

indicator-dots （显示面板提示）和 autoplay（自动切换）属性

 <swiper indicator-dots autoplay>
    <swiper-item>1</swiper-item>
    <swiper-item>2</swiper-item>
    <swiper-item>3</swiper-item>
 </swiper>

 如果感觉切换速度快  可以加入  duration 属性  如果不想人其到最后就回去 可以 加入属性  circular

 <swiper

  indicator-dots  autoplay  duration='1000' circular >

    <swiper-item>1</swiper-item>

    <swiper-item>2</swiper-item>

    <swiper-item>3</swiper-item>

 </swiper>

当然轮播图还是尽量用图片， 且使用的图片要使用网络图片 不应该使用本地 因为为小程序对内存大小有要求 ，不要自以为万一网络差，影响用户体验 因为使用的是微信小程序，用户网络不好连微信都进不去，就不可能访问我们的小程序了

 说到图片，我们就要将一下图片组件，图片组件在媒体组件中 是image标签  有 mode 和src两个属性 src是图片的地址,前面已将说过采用 网络图片，最好就不要用本地的了，

 <swiper
  indicator-dots 	autoplay 	duration='1000' circular >
    <swiper-item>
    <image src='https://pic35.photophoto.cn/20150511/0034034892281415_b.jpg' ></image>
    </swiper-item>
    <swiper-item>
      <image src='https://pic35.photophoto.cn/20150511/0034034892281415_b.jpg' ></image>
    </swiper-item>
    <swiper-item>
      <image src='https://pic35.photophoto.cn/20150511/0034034892281415_b.jpg' ></image>
    </swiper-item>
 </swiper>

   代码仅供参考，图片链接自行查找，图片样式可以通过css进行设置