用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序之swiper

纸飞机 2018-3-8 09:39

微信每个页面都要三个文件:js、wxml、wxssswiper相当于循环滚动视图适合广告位等展示。1.swiper.wxml swiper swiper ...

微信每个页面都要三个文件:js、wxml、wxss

swiper相当于循环滚动视图适合广告位等展示。

1.swiper.wxml

<view class="page">
  <view class="page__hd">
    <text class="page__title">swipertext>
    <text class="page__desc">swipertext>
  view>
  <view class="page__bd">
    <view class="section section_gap swiper">
      <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}">
          <swiper-item>
            <view class="swiper-item bc_{{item}}">view>
          swiper-item>
        block>
      swiper>
    view>
    <view class="btn-area">
      <button type="default" bindtap="changeIndicatorDots">indicator-dotsbutton>
      <button type="default" bindtap="changeVertical">{{vertical?'horizontal':'vertical'}}button>
      <button type="default" bindtap="changeAutoplay">autoplaybutton>
    view>
    <slider bindchange="durationChange" value="{{duration}}" show-value min="500" max="2000"/>
    <view class="section__title">durationview>
    <slider bindchange="intervalChange" value="{{interval}}" show-value min="2000" max="10000"/>
    <view class="section__title">intervalview>
  view>
view>

#changeIndicatorDots是点击事件是否展示dots

#changeVertical 是点击事件是否竖向、横向

#changeAutoplay 是时间是否自动滚动

#durationChange 改变持续时间

#intervalChange 改变间隔时间

#点击事件具体实现在js中代码。

2.swiper.js

Page({
  data: {
    background: ['green', 'red', 'yellow'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 3000,
    duration: 1200
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeVertical: function (e) {
    this.setData({
      vertical: !this.data.vertical
    })
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function (e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

#在页面上绑定的事件变化具体时间在这个js实现。

3.swiper. wxss

.swiper-item{
  display: block;
  height: 150px;
}
.page {
  background-color: #fbf9fe;
  height: 100%;
}
.btn-area{
    padding: 0 30px;
}
.section__title{
    margin-bottom: 16rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
}
.section_gap .section__title{
    padding-left: 0;
    padding-right: 0;
}
.section{
    margin-bottom: 80rpx;
}
.section_gap{
    padding: 0 30rpx;
}

#页面所需要的css。

效果展示.png

demo地址

https://github.com/miaozhang9/WeAppDemo

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏