微信小程序，随手记录

微信小程序轮播图的实现是利用了swiper组件（滑块视图容器）。

• 主要参数如下：

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在页面的 index
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	false	是否采用衔接滑动
bindchange	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current}

• js文件代码如下：

data: {
    imgUrls: [
      'http://p1.image.hiapk.com/uploads/allimg/150709/7730-150F9102Q9.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true,  //是否显示面板指示点
    autoplay: true,      //是否自动切换
    interval: 3000,       //自动切换时间间隔
    duration: 1000,       //滑动动画时长
    inputShowed: false,
    inputVal: ""
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

• wxml文件代码如下：

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

wxss代码如下：

.swiper {
  height: 400rpx;
  width: 100%;
}
.swiper-image {
  height: 100%;
  width: 100%;
}
.slide-image{*在这
   height: 100%;
   width: 100%;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• 效果图如下： 
  
• --------------------------------------------------------------------分割线--------------------------------------------------------------------

• 微信小程序把玩（九）scroll-view组件

  

  scroll-view为滚动视图，分为水平滚动和垂直滚动。注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效。滚动视图常用的地方一般都是Item项比较多的界面，比如我的模块

  主要属性：

  

  使用演示：

  wxml

  <!--垂直滚动，这里必须设置高度-->
  <scroll-view scroll-y="true" style="height: 200px">
      <view style="background: red; width: 100px; height: 100px" ></view>
      <view style="background: green; width: 100px; height: 100px"></view>
      <view style="background: blue; width: 100px; height: 100px"></view>
      <view style="background: yellow; width: 100px; height: 100px"></view>
  </scroll-view>
  
  <!--  white-space
    normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)
    pre: 保持HTML源代码的空格与换行,等同与pre标签
    nowrap: 强制文本在一行,除非遇到br换行标签
    pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行
    pre-line: 同pre属性,但是遇到连续空格会被看作一个空格
    inherit: 继承
  -->
  <!--水平滚动-->
  <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" >
  <!--  display: inline-block-->
    <view style="background: red; width: 200px; height: 100px; display: inline-block" ></view>
    <view style="background: green; width: 200px; height: 100px; display: inline-block"></view>
    <view style="background: blue; width: 200px; height: 100px; display: inline-block"></view>
    <view style="background: yellow; width: 200px; height: 100px; display: inline-block"></view>
  </scroll-view>
  
  
  

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27