All Projects → hlerenow → Hswiper Wx

hlerenow / Hswiper Wx

Licence: mit
微信小程序swiper插件

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Hswiper Wx

Wxappunpacker
wxml被“编译“后”压缩“一下多好!😀
Stars: ✭ 4,487 (+2586.83%)
Mutual labels:  wxml, wechat, wxapp, wxss
Tina
💃 一款轻巧的渐进式微信小程序框架
Stars: ✭ 1,153 (+590.42%)
Mutual labels:  wxml, wechat, wxapp, wxss
Weapp
🐧 微信小程序组件和功能封装,基于微信Component自定义组件开发
Stars: ✭ 235 (+40.72%)
Mutual labels:  wxml, wechat, wxapp, wxss
Wemark
微信小程序Markdown渲染库
Stars: ✭ 1,159 (+594.01%)
Mutual labels:  wxml, wechat, wxss
Wxapp Redux Starter
微信小程序,集成redux,并且提供了方便快捷的开发环境;内置好奇心日报Demo...
Stars: ✭ 205 (+22.75%)
Mutual labels:  wxml, wxapp, wxss
Mina Webpack
🍱 Mina single-file-component meets Webpack
Stars: ✭ 77 (-53.89%)
Mutual labels:  wxml, wechat, wxss
Awesome Wechat Weapp
微信小程序开发资源汇总 💯
Stars: ✭ 36,769 (+21917.37%)
Mutual labels:  wxml, wechat, wxapp
Oncelove
婚礼请柬小程序
Stars: ✭ 209 (+25.15%)
Mutual labels:  wxml, wechat, wxss
Wxapp toutiaonews
📰微信小程序--头条新闻
Stars: ✭ 119 (-28.74%)
Mutual labels:  wxml, wxapp, wxss
Wuss Weapp
🐳wuss-weapp 一款高质量,组件齐全,高自定义的微信小程序UI组件库
Stars: ✭ 338 (+102.4%)
Mutual labels:  wxml, wechat, wxss
Autocomplete Wx
一款atom插件,支持微信语法高亮和代码补全
Stars: ✭ 47 (-71.86%)
Mutual labels:  wxml, wxapp, wxss
Wxapp Mall
微信小程序 商城demo
Stars: ✭ 1,190 (+612.57%)
Mutual labels:  wechat, wxapp
Taro Msparis
🌱用 React 编写的基于Taro + Dva构建的适配不同端(微信/百度/支付宝小程序、H5、React-Native 等)的时装衣橱
Stars: ✭ 1,203 (+620.36%)
Mutual labels:  wechat, wxapp
Wxmlify
一个轻量快速的插件,帮助你在微信小程序中显示富文本编辑器生成的HTML。
Stars: ✭ 93 (-44.31%)
Mutual labels:  wxml, wechat
Vue Swipe Mobile
😃 A siwpe (touch slider) component for Vue2
Stars: ✭ 97 (-41.92%)
Mutual labels:  swipe, swiper
Weapp Qrcode Base64
微信小程序生成二维码的插件,基于base64编码输出二维码,不依赖canvas
Stars: ✭ 100 (-40.12%)
Mutual labels:  wechat, wxapp
Wepy Calendar
微信小程序/wepy/日历组件
Stars: ✭ 58 (-65.27%)
Mutual labels:  wxml, wxapp
Wechat Weapp Movie
🎬电影推荐 - 微信小程序
Stars: ✭ 1,355 (+711.38%)
Mutual labels:  wechat, wxapp
M Mall
🐶 微信小程序-小商城前台(基于 WeUI.wxss、ES6 前端技术开发...)
Stars: ✭ 1,484 (+788.62%)
Mutual labels:  wxapp, wxss
Wx Miniprogram Boilerplate
基于Gulp微信小程序开发工作流,支持less样式编写,支持ESLint代码检查等功能
Stars: ✭ 122 (-26.95%)
Mutual labels:  wechat, wxapp

hSwiper-wx

小程序swiper组件

license Version npm

使用此组件需要依赖小程序基础库 2.2.2 版本,同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档

旧版传送门,新版已经支持npm包安装

演示

  1. 水平

  1. 垂直

  1. 不循环

功能

  1. 支持水平,垂直滚动
  2. 支持循环无缝滚动
  3. 过渡位移效果支持自定义
  4. 过渡位移时间支持自定义
  5. 支持无限元素的滚动,而不会卡顿(未实现,待续...)

安装

  npm install --save hswiper-wx

使用

  1. 在页面的 json 配置文件中添加 hswiper-wx 自定义组件的配置
  {
    "usingComponents": {
      "hswiper": "hswiper-wx",
    }
  }
  1. 在项目根目录下创建如下目录文件
  --hSwiper
      --swiperTemplate.wxml
      --swiperTemplate.wxss
// swiperTemplate.wxml
// 每个视图的内容的wxml都写在该文件里面,使用 template标签 ,并且命名 ,当调用这里面的模版时,会自动注入 item以及 index数据,index表示是当前元素的元素索引 ,item则表示当前元素 数据。(相当于dataList[index]=item,但是 list不会注入到模版里面)

<template name="hSwiperItem">
  <view style="width: 100%; height: 100%;" class="imgBox">
    <view style="width: 100%; height: 100%;" class="imgBorder">
      <image class="imgOmg" mode="widthFix" src="{{item}}"></image>
    </view>
  </view>
</template>

<template name="hSwiperItem2">
  <view style="width: 100%; height: 100%;">
    {{item}}
  </view>
</template>

// swiperTemplate.wxss, swiperTemplate.wxml对应的样式
.imgBox {
  padding: 10px 10px;
  box-sizing: border-box;
  flex: 1;
  justify-content: center;
  align-items: center
}

.imgBorder {
  border: 1px solid #eee;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
}

.imgOmg {
  display: block;
  width: 80%;
  height: 80%;
  border-radius: 6px;
}
  1. 在需要使用的页面的中
/// wxml中
<View style="width: 320px; height: 500px"
    class="swiper"
>
  <comp
    recycle="{{recyle}}"
    vertical="{{false}}"
    templateName="hSwiperItem"
    padding="{{30}}"
    moveTo="{{moveTo}}"
    bind:customevent="getRef"
    initIndex="{{2}}"
    width="{{320}}"
    height="{{500}}"
    animationType="ease-out"
    animationDuration="300"
    bind:firstView="firstView"
    bind:alreadyFirstView="alreadyFirstView"
    bind:beforeViewChange="beforeViewChange"
    bind:afterViewChange="afterViewChange"
    bind:lastView="lastView"
    bind:alreadyLastView="alreadyLastView"
    bind:move="viewMove"
    dataList="{{dataList}}"
  ></comp>
</View>
// js 中
Page({
  data: {
    dataList: [
      'http://statics.h-five.com/db2.jpg',
      'http://statics.h-five.com/db3.jpg',
      'http://statics.h-five.com/little-love.jpg',
      'http://statics.h-five.com/withme.jpg'
    ],
    dataList2: [0, 1, 2, 3, 4],
    moveTo: 0,
    recyle: false
  },
  onReady() {
    if (this.data.recyle) {
      setInterval(() => {
        this.setData({
          moveTo: (this.data.moveTo + 1) % this.data.dataList.length
        })
        console.log('change view')
      }, 1000)
    }
  },
  alreadyFirstView(e) {
    console.log('alreadyFirstView', e)
  },
  firstView(e) {
    console.log('firstView', e)
  },
  beforeViewChange(e) {
    console.log('beforeViewChange', e)
  },
  afterViewChange(e) {
    console.log('afterViewChange', e)
  },
  lastView(e) {
    console.log('lastView', e)
  },
  alreadyLastView(e) {
    console.log('alreadyLastView', e)
  },
  viewMove(e) {
    // console.log('viewMove', e)
  }
})

属性说明

字段名 类型 必填 描述
templateName String item对应的模版名称。全局设置,默认值为 _hswiper_emptyItem_default, 全局的,如果每个item需要使用不同的模版,可以在item中增加 templateName 属性值,该值会覆盖全局的 templateName
dataList Array 需要渲染的数据
width Number swiper 容器的宽度, 默认值为屏幕的宽度
height Number swiper 容器的高度, 默认值为屏幕的高度
recycle Boolean 是否循环滚动, 默认值 false
vertical Boolean 是否垂直滚动, 默认值 false
padding Number 该参数用于确定每个滚动元素的的宽度以及高度,每个元素的宽度为 width - (padding + paddingX) * 2, 高度为height - (padding + paddingY) * 2, 默认值为0
paddingX Number 同上, 默认值为0
paddingY Number 同上, 默认值为0
moveTo Number 当改属性改变后, 插件会跳转到指定索引的数据视图,0 < moveTo < dataList.length
moveToWithOutAnimation Number 同上,但无过渡动画
initIndex Number 插件初始化时 跳转的视图索引,默认值0
animationType String 过渡动画类型,['linear', 'ease-in', 'ease-in-out', 'ease-out', 'step-start', 'step-end']之一 ,默认值 ease
animationDuration Number 过渡动画时间,默认值 300

事件

事件名 描述
firstView 当跳转到的视图是第一个视图时触发
alreadyFirstView 非循环模式下,重复跳转到的视图是第一个视图时触发
beforeViewChange 视图跳转前触发
afterViewChange 视图跳转前触发
lastView 当跳转到的视图是最后个视图时触发
alreadyLastView 非循环模式下,重复跳转到的视图是最后个视图时触发
move 视图移动时触发
onTap 点击每个item时触发

具体使用 可查看example文件夹下的例子,有注释说明。欢迎提问!!!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].