Skip to content

Commit

Permalink
add actionsheet & bug fix
Browse files Browse the repository at this point in the history
  • Loading branch information
skyvow committed Feb 12, 2017
1 parent 9f8638c commit a2b234c
Show file tree
Hide file tree
Showing 142 changed files with 596 additions and 191 deletions.
20 changes: 20 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
138 changes: 119 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,21 @@
# 微信小程序-自定义组件
微信小程序 - 自定义组件
=

## 预览

[微信web开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)打开`src`目录(请注意,是src目录,不是整个项目)

<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-01.png" width="375px" style="display:inline;">

## 使用

- 组件的wxml结构请看`src/components/`下的组件
- 样式文件可直接引用`src/components/wux.wxss`

## Components

* [ActionSheet - 上拉菜单](#actionsheet)

* [Backdrop - 背景幕](#backdrop)

* [CountUp - 计数器](#countup)
Expand All @@ -24,6 +38,92 @@

* [Xnumber - 计数器](#xnumber)

## ActionSheet

```html
<import src="../../components/actionsheet/actionsheet.wxml"/>

<template is="actionsheet" data="{{ ...$wux.actionSheet }}"/>

<view class="page">
<view class="page__hd">
<view class="page__title">ActionSheet</view>
<view class="page__desc">上拉菜单</view>
</view>
<view class="page__bd">
<view class="weui-btn-area">
<button class="weui-btn" type="default" bindtap="showActionSheet1">原生 ActionSheet</button>
<button class="weui-btn" type="default" bindtap="showActionSheet2">自定义 ActionSheet</button>
<button class="weui-btn" type="default" bindtap="showActionSheet3">自定义 ActionSheet</button>
</view>
</view>
</view>
```

```js
const App = getApp()

Page({
data: {},
onLoad() {
this.$wuxActionSheet = App.wux(this).$wuxActionSheet
},
showActionSheet1() {
wx.showActionSheet({
itemList: ['实例菜单', '实例菜单']
})
},
showActionSheet2() {
this.$wuxActionSheet.show({
titleText: '自定义操作',
buttons: [
{
text: 'Go Dialog'
},
{
text: 'Go Toast'
},
],
buttonClicked(index, item) {
index === 0 && wx.navigateTo({
url: '/pages/dialog/index'
})

index === 1 && wx.navigateTo({
url: '/pages/toast/index'
})

return true
},
cancelText: '取消',
cancel() {},
destructiveText: '删除',
destructiveButtonClicked() {},
})
},
showActionSheet3() {
if (this.timeout) clearInterval(this.timeout)

const hideSheet = this.$wuxActionSheet.show({
titleText: '三秒后自动关闭',
buttons: [
{
text: '实例菜单'
},
{
text: '实例菜单'
},
],
buttonClicked(index, item) {
return true
},
})

this.timeout = setTimeout(hideSheet, 3000)
},
})
```

## Backdrop

```html
Expand Down Expand Up @@ -949,41 +1049,41 @@ Page({

## 项目截图

<img src="https://github.com/skyvow/wux/blob/master/assets/images/screenshots/screenshorts-01.png" width="375px" style="display:inline;">
<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-17.png" width="375px" style="display:inline;">

<img src="https://github.com/skyvow/wux/blob/master/assets/images/screenshots/screenshorts-02.png" width="375px" style="display:inline;">
<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-02.png" width="375px" style="display:inline;">

<img src="https://github.com/skyvow/wux/blob/master/assets/images/screenshots/screenshorts-16.png" width="375px" style="display:inline;">
<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-16.png" width="375px" style="display:inline;">

<img src="https://github.com/skyvow/wux/blob/master/assets/images/screenshots/screenshorts-03.png" width="375px" style="display:inline;">
<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-03.png" width="375px" style="display:inline;">

<img src="https://github.com/skyvow/wux/blob/master/assets/images/screenshots/screenshorts-04.png" width="375px" style="display:inline;">
<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-04.png" width="375px" style="display:inline;">

<img src="https://github.com/skyvow/wux/blob/master/assets/images/screenshots/screenshorts-05.png" width="375px" style="display:inline;">
<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-05.png" width="375px" style="display:inline;">

<img src="https://github.com/skyvow/wux/blob/master/assets/images/screenshots/screenshorts-06.png" width="375px" style="display:inline;">
<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-06.png" width="375px" style="display:inline;">

<img src="https://github.com/skyvow/wux/blob/master/assets/images/screenshots/screenshorts-07.png" width="375px" style="display:inline;">
<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-07.png" width="375px" style="display:inline;">

<img src="https://github.com/skyvow/wux/blob/master/assets/images/screenshots/screenshorts-08.png" width="375px" style="display:inline;">
<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-08.png" width="375px" style="display:inline;">

<img src="https://github.com/skyvow/wux/blob/master/assets/images/screenshots/screenshorts-09.png" width="375px" style="display:inline;">
<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-09.png" width="375px" style="display:inline;">

<img src="https://github.com/skyvow/wux/blob/master/assets/images/screenshots/screenshorts-10.png" width="375px" style="display:inline;">
<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-10.png" width="375px" style="display:inline;">

<img src="https://github.com/skyvow/wux/blob/master/assets/images/screenshots/screenshorts-11-1.png" width="375px" style="display:inline;">
<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-11-1.png" width="375px" style="display:inline;">

<img src="https://github.com/skyvow/wux/blob/master/assets/images/screenshots/screenshorts-11-2.png" width="375px" style="display:inline;">
<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-11-2.png" width="375px" style="display:inline;">

<img src="https://github.com/skyvow/wux/blob/master/assets/images/screenshots/screenshorts-11-3.png" width="375px" style="display:inline;">
<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-11-3.png" width="375px" style="display:inline;">

<img src="https://github.com/skyvow/wux/blob/master/assets/images/screenshots/screenshorts-12.png" width="375px" style="display:inline;">
<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-12.png" width="375px" style="display:inline;">

<img src="https://github.com/skyvow/wux/blob/master/assets/images/screenshots/screenshorts-13.png" width="375px" style="display:inline;">
<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-13.png" width="375px" style="display:inline;">

<img src="https://github.com/skyvow/wux/blob/master/assets/images/screenshots/screenshorts-14.png" width="375px" style="display:inline;">
<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-14.png" width="375px" style="display:inline;">

<img src="https://github.com/skyvow/wux/blob/master/assets/images/screenshots/screenshorts-15.png" width="375px" style="display:inline;">
<img src="https://github.com/skyvow/wux/blob/master/screenshots/screenshorts-15.png" width="375px" style="display:inline;">

## 贡献

Expand Down
Binary file removed assets/images/screenshots/screenshorts-01.png
Binary file not shown.
29 changes: 0 additions & 29 deletions components/wux.js

This file was deleted.

Binary file added screenshots/screenshorts-01.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
Binary file added screenshots/screenshorts-17.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes.
1 change: 1 addition & 0 deletions app.json → src/app.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"pages/gallery/index",
"pages/xnumber/index",
"pages/countup/index",
"pages/actionsheet/index",
"pages/about/index"
],
"window": {
Expand Down
File renamed without changes.
File renamed without changes
File renamed without changes
Binary file added src/assets/images/iconfont-actionsheet.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes.
File renamed without changes.
File renamed without changes.
159 changes: 159 additions & 0 deletions src/components/actionsheet/actionsheet.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
import tools from '../tools/tools'

/**
* wux组件
* @param {Object} $scope 作用域对象
*/
class wux {
constructor($scope) {
Object.assign(this, {
$scope,
})
this.__init()
}

/**
* 初始化类方法
*/
__init() {
this.__initDefaults()
this.__initTools()
this.__initComponents()
}

/**
* 默认参数
*/
__initDefaults() {
const actionSheet = {}

this.$scope.setData({
[`$wux.actionSheet`]: actionSheet,
})
}

/**
* 工具方法
*/
__initTools() {
this.tools = new tools
}

/**
* 初始化所有组件
*/
__initComponents() {
this.__initActionSheet()
}

/**
* 上拉菜单组件
*/
__initActionSheet() {
const that = this
const extend = that.tools.extend
const clone = that.tools.clone
const $scope = that.$scope

that.$wuxActionSheet = {
defaults: {
className: undefined,
titleText: undefined,
buttons: [],
buttonClicked: function() {},
cancelText: '取消',
cancel: function() {},
// destructiveText: '删除',
// destructiveButtonClicked: function() {},
},
/**
* 显示上拉菜单组件
* @param {Object} opts 参数对象
* @param {String} opts.className 添加自定义类
* @param {String} opts.titleText 标题
* @param {Array} opts.buttons 按钮
* @param {Function} opts.buttonClicked 按钮点击事件
* @param {String} opts.cancelText 取消按钮的文本
* @param {Function} opts.cancel 取消按钮点击事件
* @param {String} opts.destructiveText 删除按钮的文本
* @param {Function} opts.destructiveButtonClicked 删除按钮点击事件
*/
show(opts = {}) {
const options = extend(clone(this.defaults), opts)

// 显示
const showSheet = () => {
that.setVisible('actionSheet', ['weui-animate-slide-up', 'weui-animate-fade-in'])
}

// 隐藏
const removeSheet = (callnack) => {
that.setHidden('actionSheet', ['weui-animate-slide-down', 'weui-animate-fade-out'])
typeof callback === 'function' && callback(opts.buttons)
}

// 按钮点击事件
const buttonClicked = (e) => {
const index = e.currentTarget.dataset.index
if (options.buttonClicked(index, options.buttons[index]) === true) {
removeSheet()
}
}

// 删除按钮点击事件
const destructiveButtonClicked = () => {
if (options.destructiveButtonClicked() === true) {
removeSheet()
}
}

// 取消按钮点击事件
const cancel = () => removeSheet(options.cancel)

// 渲染组件
$scope.setData({
[`$wux.actionSheet`]: options,
[`$wux.actionSheet.onButtonClicked`]: `actionSheetButtonClicked`,
[`$wux.actionSheet.onDestructiveButtonClicked`]: `actionSheetDestructiveButtonClicked`,
[`$wux.actionSheet.onCancel`]: `actionSheetCancel`,
})

// 绑定tap事件
$scope[`actionSheetButtonClicked`] = buttonClicked
$scope[`actionSheetDestructiveButtonClicked`] = destructiveButtonClicked
$scope[`actionSheetCancel`] = cancel

showSheet()

return cancel
},
}
}

/**
* 设置元素显示
*/
setVisible(key, className = 'weui-animate-fade-in') {
this.$scope.setData({
[`$wux.${key}.visible`]: !0,
[`$wux.${key}.animateCss`]: className,
})
}

/**
* 设置元素隐藏
*/
setHidden(key, className = 'weui-animate-fade-out', timer = 300) {
this.$scope.setData({
[`$wux.${key}.animateCss`]: className,
})

setTimeout(() => {
this.$scope.setData({
[`$wux.${key}.visible`]: !1,
})
}, timer)
}
}

export default wux
Loading

0 comments on commit a2b234c

Please sign in to comment.