Git Product home page Git Product logo

slide-view's Introduction

本仓库不再维护,有需求请使用weui-miniprogram的slideview组件。

slide-view

小程序自定义组件

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

使用效果

slide-view

PS:此组件默认只携带基本样式,若想要获得上图中的效果,可参考 tools/demo 中的例子实现。

使用方法

  1. 安装 slide-view
npm install --save miniprogram-slide-view
  1. 在需要使用 slide-view 的页面 page.json 中添加 slide-view 自定义组件配置
{
  "usingComponents": {
    "slide-view": "miniprogram-slide-view"
  }
}
  1. WXML 文件中引用 slide-view

每一个 slide-view 提供两个<slot>节点,用于承载组件引用时提供的子节点。left 节点用于承载静止时 slide-view 所展示的节点,此节点的宽高应与传入 slide-view 的宽高相同。right 节点用于承载滑动时所展示的节点,其宽度应于传入 slide-view 的 slideWidth 相同。

<slide-view class="slide" width="320" height="100" slideWidth="200">
  <view slot="left">这里是插入到组内容</view>
  <view slot="right">
    <view>标为已读</view>
    <view>删除</view>
  </view>
</slide-view>

slide-view的属性介绍如下:

属性名 类型 单位 默认值 是否必须 说明
width Number rpx 显示屏幕的宽度 slide-view组件的宽度
height Number rpx 0 slide-view组件的高度
slide-width Number rpx 0 滑动展示区域的宽度(默认高度与slide-view相同)

slide-view's People

Contributors

baishusama avatar cunjinli6 avatar juneandgreen avatar nnnina avatar xbufan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

slide-view's Issues

关于gulp打包监听的问题

image
我想请问下,这里问什么要用到webpack去打包/监听js?吧js当成和wxss/wxml资源一样使用gulp.watch和gulp.dest去监听和复制不可以吗?

感觉通用性不太好

宽度和高度能自动计算就好.感觉750 的宽度是写死的,在js 里也有.如果比750宽的设备,还是正常的么?

提一个遇到的问题

我有一个数组 [0, 1, 2, 3],然后遍历出来列表,可是我删除第一条的时候,数组元素索引变成了 [1, 2, 3],这个时候,删除并没有消失..

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.