找回密码
 立即注册

QQ登录

只需一步,快速开始

[工具插件] wux - 微信小程序自定义组件(对话框、指示器、五星评分.....

[复制链接]
查看: 1837|回复: 13
最佳答案
0 

6

主题

20

帖子

652

积分

专家路上

积分
652
 楼主| 发表于 2017-2-13 17:17:57 | 显示全部楼层 |阅读模式
预览

用微信web开发者工具打开src目录(请注意,是src目录,不是整个项目)
screenshorts-01.png

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

Components
  • ActionSheet - 上拉菜单
  • Backdrop - 背景幕
  • CountUp - 计数器
  • Dialog - 对话框
  • Gallery - 画廊
  • Loading - 指示器
  • Picker - 选择器
  • Prompt - 提示信息
  • Qrcode - 二维码
  • Rater - 评分
  • Toast - 提示框
  • Toptips - 顶部提示
  • Xnumber - 计数器

项目截图(内容太长,代码在下方回帖中)

1.png
2.png
3.png
4.png
5.png
6.png
7.png
8.png
9.png
10.png
11.png
12.png
13.png
14.png
15.png
16.png
17.png
18.png
19.png

wux-master.zip (667.66 KB, 下载次数: 60)
回复

使用道具 举报

最佳答案
0 

6

主题

20

帖子

652

积分

专家路上

积分
652
 楼主| 发表于 2017-2-13 17:22:22 | 显示全部楼层
ActionSheet
  1. <import src="../../components/actionsheet/actionsheet.wxml"/>

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

  3. <view class="page">
  4.     <view class="page__hd">
  5.         <view class="page__title">ActionSheet</view>
  6.         <view class="page__desc">上拉菜单</view>
  7.     </view>
  8.     <view class="page__bd">
  9.         <view class="weui-btn-area">
  10.             <button class="weui-btn" type="default" bindtap="showActionSheet1">原生 ActionSheet</button>
  11.             <button class="weui-btn" type="default" bindtap="showActionSheet2">自定义 ActionSheet</button>
  12.             <button class="weui-btn" type="default" bindtap="showActionSheet3">自定义 ActionSheet</button>
  13.         </view>
  14.     </view>
  15. </view>
复制代码
  1. const App = getApp()

  2. Page({
  3.     data: {},
  4.     onLoad() {
  5.         this.$wuxActionSheet = App.wux(this).$wuxActionSheet
  6.     },
  7.     showActionSheet1() {
  8.         wx.showActionSheet({
  9.             itemList: ['实例菜单', '实例菜单']
  10.         })
  11.     },
  12.     showActionSheet2() {
  13.         this.$wuxActionSheet.show({
  14.             titleText: '自定义操作',
  15.             buttons: [
  16.                 {
  17.                     text: 'Go Dialog'
  18.                 },
  19.                 {
  20.                     text: 'Go Toast'
  21.                 },
  22.             ],
  23.             buttonClicked(index, item) {
  24.                 index === 0 && wx.navigateTo({
  25.                     url: '/pages/dialog/index'
  26.                 })

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

  30.                 return true
  31.             },
  32.             cancelText: '取消',
  33.             cancel() {},
  34.             destructiveText: '删除',
  35.             destructiveButtonClicked() {},
  36.         })
  37.     },
  38.     showActionSheet3() {
  39.         if (this.timeout) clearTimeout(this.timeout)

  40.         const hideSheet = this.$wuxActionSheet.show({
  41.             titleText: '三秒后自动关闭',
  42.             buttons: [
  43.                 {
  44.                     text: '实例菜单'
  45.                 },
  46.                 {
  47.                     text: '实例菜单'
  48.                 },
  49.             ],
  50.             buttonClicked(index, item) {
  51.                 return true
  52.             },
  53.         })

  54.         this.timeout = setTimeout(hideSheet, 3000)
  55.     },
  56. })
复制代码

回复 支持 反对

使用道具 举报

最佳答案
0 

6

主题

20

帖子

652

积分

专家路上

积分
652
 楼主| 发表于 2017-2-13 17:23:19 | 显示全部楼层
Backdrop
  1. <import src="../../components/backdrop/backdrop.wxml"/>

  2. <template is="backdrop" data="{{ ...$wux.backdrop }}"/>

  3. <view class="page">
  4.     <view class="page__hd">
  5.         <view class="page__title">Backdrop</view>
  6.         <view class="page__desc">背景幕</view>
  7.     </view>
  8.     <view class="page__bd">
  9.         <view class="weui-btn-area ezpop">
  10.             <button class="weui-btn" type="default" bindtap="retain">保持背景幕 retain</button>
  11.             <button class="weui-btn" type="primary" bindtap="release">释放背景幕 release</button>
  12.         </view>
  13.         <view class="text-center">背景幕锁:{{ locks }}</view>
  14.     </view>
  15. </view>
复制代码
  1. const App = getApp()

  2. Page({
  3.     data: {
  4.         locks: 0,
  5.     },
  6.     onLoad() {
  7.         this.$wuxBackdrop = App.wux(this).$wuxBackdrop
  8.     },
  9.     retain() {
  10.         this.$wuxBackdrop.retain()
  11.         this.setData({
  12.             locks: this.$wuxBackdrop.backdropHolds
  13.         })
  14.     },
  15.     release() {
  16.         this.$wuxBackdrop.release()
  17.         this.setData({
  18.             locks: this.$wuxBackdrop.backdropHolds
  19.         })
  20.     }
  21. })
复制代码
回复 支持 反对

使用道具 举报

最佳答案
0 

6

主题

20

帖子

652

积分

专家路上

积分
652
 楼主| 发表于 2017-2-13 17:23:51 | 显示全部楼层
CountUp
  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">CountUp</view>
  4.         <view class="page__desc">计数器</view>
  5.     </view>
  6.     <view class="page__bd">
  7.         <view class="text-center">
  8.             <view class="countup">{{ $wux.countUp.c1.value }}</view>
  9.             <view class="countup">{{ $wux.countUp.c2.value }}</view>
  10.             <view class="countup">{{ $wux.countUp.c3.value }}</view>
  11.         </view>
  12.         <view class="weui-btn-area text-center">
  13.             <button class="weui-btn" type="primary" size="mini" bindtap="start">Start</button>
  14.             <button class="weui-btn" type="primary" size="mini" bindtap="pauseResume">Pause/Resume</button>
  15.             <button class="weui-btn" type="primary" size="mini" bindtap="reset">Reset</button>
  16.             <button class="weui-btn" type="primary" size="mini" bindtap="update">Update</button>
  17.         </view>
  18.     </view>
  19. </view>
复制代码
  1. const App = getApp()

  2. Page({
  3.     data: {},
  4.     onLoad() {
  5.         this.$wuxCountUp = App.wux(this).$wuxCountUp

  6.         this.c1 = this.$wuxCountUp.render('c1', 1, 1024)
  7.         this.c2 = this.$wuxCountUp.render('c2', 0, 88.88, 2)
  8.         this.c3 = this.$wuxCountUp.render('c3', 0, 520)

  9.         this.c1.start()
  10.         this.c2.start()
  11.     },
  12.     start() {
  13.         this.c3.start(() => {
  14.             wx.showToast({
  15.                 title: '已完成',
  16.             })
  17.         })
  18.     },
  19.     reset() {
  20.         this.c3.reset()
  21.     },
  22.     update() {
  23.         this.c3.update(1314)
  24.     },
  25.     pauseResume() {
  26.         this.c3.pauseResume()
  27.     },
  28. })
复制代码
回复 支持 反对

使用道具 举报

最佳答案
0 

6

主题

20

帖子

652

积分

专家路上

积分
652
 楼主| 发表于 2017-2-13 17:24:16 | 显示全部楼层
Dialog
  1. <import src="../../components/dialog/dialog.wxml"/>

  2. <template is="dialog" data="{{ ...$wux.dialog }}"/>

  3. <view class="page">
  4.     <view class="page__hd">
  5.         <view class="page__title">Dialog</view>
  6.         <view class="page__desc">对话框</view>
  7.     </view>
  8.     <view class="page__bd">
  9.         <view class="weui-btn-area">
  10.             <button class="weui-btn" type="default" bindtap="openConfirm">Confirm Dialog</button>
  11.             <button class="weui-btn" type="default" bindtap="openAlert">Alert Dialog</button>
  12.         </view>
  13.     </view>
  14. </view>
复制代码
  1. const App = getApp()

  2. Page({
  3.     data: {},
  4.     onLoad() {
  5.         this.$wuxDialog = App.wux(this).$wuxDialog
  6.     },
  7.     openConfirm() {
  8.         if (this.timeout) clearTimeout(this.timeout)

  9.         const hideDialog = this.$wuxDialog.open({
  10.             title: '三秒后自动关闭',
  11.             content: '弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内',
  12.             confirm: () => console.log('confirm'),
  13.             cancel: () => console.log('cancel'),
  14.         })

  15.         this.timeout = setTimeout(hideDialog, 3000)
  16.     },
  17.     openAlert() {
  18.         this.$wuxDialog.open({
  19.             showCancel: !1,
  20.             title: '弹窗标题',
  21.             content: '弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内',
  22.             confirm: () => console.log('confirm'),
  23.         })
  24.     }
  25. })
复制代码
回复 支持 反对

使用道具 举报

最佳答案
0 

6

主题

20

帖子

652

积分

专家路上

积分
652
 楼主| 发表于 2017-2-13 17:24:50 | 显示全部楼层
Gallery
  1. <import src="../../components/gallery/gallery.wxml"/>

  2. <template is="gallery" data="{{ ...$wux.gallery }}"/>

  3. <view class="page">
  4.     <view class="page__hd">
  5.         <view class="page__title">Gallery</view>
  6.         <view class="page__desc">画廊</view>
  7.     </view>
  8.     <view class="page__bd">
  9.         <view class="weui-cells__title">基于小程序原生的wx.previewImage</view>
  10.         <view class="weui-cells weui-cells_after-title">
  11.             <view class="weui-cell">
  12.                 <view class="weui-cell__bd">
  13.                     <view class="weui-uploader">
  14.                         <view class="weui-uploader__bd">
  15.                             <view class="weui-uploader__files">
  16.                                 <block wx:for-items="{{ urls }}" wx:key="{{ index }}">
  17.                                     <view class="weui-uploader__file" bindtap="previewImage" data-current="{{ item }}">
  18.                                         <image class="weui-uploader__img" src="{{ item }}" />
  19.                                     </view>
  20.                                 </block>
  21.                             </view>
  22.                         </view>
  23.                     </view>
  24.                 </view>
  25.             </view>
  26.         </view>
  27.         <view class="weui-cells__title">自定义gallery</view>
  28.         <view class="weui-cells weui-cells_after-title">
  29.             <view class="weui-cell">
  30.                 <view class="weui-cell__bd">
  31.                     <view class="weui-uploader">
  32.                         <view class="weui-uploader__bd">
  33.                             <view class="weui-uploader__files">
  34.                                 <block wx:for-items="{{ urls }}" wx:key="{{ index }}">
  35.                                     <view class="weui-uploader__file" bindtap="showGallery" data-current="{{ index }}">
  36.                                         <image class="weui-uploader__img" src="{{ item }}" />
  37.                                     </view>
  38.                                 </block>
  39.                             </view>
  40.                         </view>
  41.                     </view>
  42.                 </view>
  43.             </view>
  44.         </view>
  45.     </view>
  46. </view>
复制代码
  1. const App = getApp()

  2. Page({
  3.     data: {
  4.         urls: [
  5.             'https://unsplash.it/200/200',
  6.             'https://unsplash.it/300/300',
  7.             'https://unsplash.it/400/400',
  8.             'https://unsplash.it/600/600',
  9.             'https://unsplash.it/800/800',
  10.             'https://unsplash.it/900/900',
  11.             'https://unsplash.it/1000/1000',
  12.             'https://unsplash.it/1200/1200',
  13.         ],
  14.     },
  15.     onLoad() {
  16.         this.$wuxGallery = App.wux(this).$wuxGallery
  17.     },
  18.     showGallery(e) {
  19.         const that = this
  20.         const dataset = e.currentTarget.dataset
  21.         const current = dataset.current
  22.         const urls = this.data.urls

  23.         this.$wuxGallery.show({
  24.             current: current,
  25.             urls: urls,
  26.             delete: (current, urls) => {
  27.                 urls.splice(current, 1)
  28.                 that.setData({
  29.                     urls: urls,
  30.                 })
  31.                 return !0
  32.             },
  33.             callback: () => console.log('Close gallery')
  34.         })
  35.     },
  36.     previewImage(e) {
  37.         const dataset = e.currentTarget.dataset
  38.         const current = dataset.current
  39.         const urls = this.data.urls

  40.         wx.previewImage({
  41.             current: current,
  42.             urls: urls,
  43.         })
  44.     },
  45. })
复制代码
回复 支持 反对

使用道具 举报

最佳答案
0 

6

主题

20

帖子

652

积分

专家路上

积分
652
 楼主| 发表于 2017-2-13 17:25:45 | 显示全部楼层
Loading
  1. <import src="../../components/loading/loading.wxml"/>

  2. <template is="loading" data="{{ ...$wux.loading }}"/>

  3. <view class="page">
  4.     <view class="page__hd">
  5.         <view class="page__title">Loading</view>
  6.         <view class="page__desc">指示器</view>
  7.     </view>
  8.     <view class="page__bd">
  9.         <view class="weui-btn-area">
  10.             <button class="weui-btn" type="default" bindtap="showLoading">加载中提示</button>
  11.         </view>
  12.     </view>
  13. </view>
复制代码
  1. const App = getApp()

  2. Page({
  3.     data: {},
  4.     onLoad() {
  5.         this.$wuxLoading = App.wux(this).$wuxLoading
  6.     },
  7.     showLoading() {
  8.         this.$wuxLoading.show({
  9.             text: '数据加载中',
  10.         })

  11.         setTimeout(() => {
  12.             this.$wuxLoading.hide()
  13.         }, 1500)
  14.     },
  15. })
复制代码
回复 支持 反对

使用道具 举报

最佳答案
0 

6

主题

20

帖子

652

积分

专家路上

积分
652
 楼主| 发表于 2017-2-13 17:26:23 | 显示全部楼层
Picker
  1. <import src="../../components/picker/picker.wxml"/>

  2. <template is="picker" data="{{ ...$wux.picker.default }}"/>
  3. <template is="picker" data="{{ ...$wux.picker.multi }}"/>
  4. <template is="picker" data="{{ ...$wux.pickerCity.city }}"/>


  5. <view class="page">
  6.     <view class="page__hd">
  7.         <view class="page__title">Picker</view>
  8.         <view class="page__desc">选择器</view>
  9.     </view>
  10.     <view class="page__bd">
  11.         <view class="weui-btn-area">
  12.             <button class="weui-btn" type="default" bindtap="onTapDefault">Default-Picker {{ default }}</button>
  13.             <button class="weui-btn" type="default" bindtap="onTapMulti">Multi-Picker {{ multi }}</button>
  14.             <button class="weui-btn" type="default" bindtap="onTapCity">City-Picker {{ city }}</button>
  15.         </view>
  16.     </view>
  17. </view>
复制代码
  1. const App = getApp()

  2. Page({
  3.     data: {},
  4.     onLoad() {
  5.         this.$wuxPicker = App.wux(this).$wuxPicker
  6.         this.$wuxPickerCity = App.wux(this).$wuxPickerCity
  7.     },
  8.     onTapDefault() {
  9.         const that = this
  10.         that.$wuxPicker.render('default', {
  11.             items: ['飞机票', '火车票', '的士票', '住宿费', '礼品费', '活动费', '通讯费', '补助', '其他'],
  12.             bindChange(value, values) {
  13.                 console.log(value, values)
  14.                 that.setData({
  15.                     default: values
  16.                 })
  17.             },
  18.         })
  19.     },
  20.     onTapMulti() {
  21.         const that = this
  22.         that.$wuxPicker.render('multi', {
  23.             items: [
  24.                 ['1', '2', '3'],
  25.                 ['A', 'B', 'C'],
  26.             ],
  27.             value: [0, 1],
  28.             bindChange(value, values) {
  29.                 console.log(value, values)
  30.                 that.setData({
  31.                     multi: values
  32.                 })
  33.             },
  34.         })
  35.     },
  36.     onTapCity() {
  37.         const that = this
  38.         that.$wuxPickerCity.render('city', {
  39.             title: '请选择目的地',
  40.             value: [8, 0, 11],
  41.             bindChange(value, values, displayValues) {
  42.                 console.log(value, values, displayValues)
  43.                 that.setData({
  44.                     city: displayValues
  45.                 })
  46.             },
  47.         })
  48.     },
  49. })
复制代码
回复 支持 反对

使用道具 举报

最佳答案
0 

6

主题

20

帖子

652

积分

专家路上

积分
652
 楼主| 发表于 2017-2-13 17:27:26 | 显示全部楼层
Prompt
  1. <import src="../../components/prompt/prompt.wxml"/>

  2. <view class="page">
  3.     <view class="page__bd">
  4.         <view class="weui-tab">
  5.             <view class="weui-navbar">
  6.                 <block wx:for-items="{{ tabs}}" wx:key="{{ index }}">
  7.                     <view id="{{ index }}" class="weui-navbar__item {{ activeIndex == index ? 'weui-bar__item_on' : '' }}" bindtap="tabClick">
  8.                         <view class="weui-navbar__title">{{ item }}</view>
  9.                     </view>
  10.                 </block>
  11.                 <view class="weui-navbar__slider" style="left: {{ sliderLeft }}px; transform: translateX({{ sliderOffset }}px); -webkit-transform: translateX({{ sliderOffset }}px);"></view>
  12.             </view>
  13.             <view class="weui-tab__panel">
  14.                 <view class="weui-tab__content" hidden="{{ activeIndex != 0 }}">
  15.                     <template is="prompt" data="{{ ...$wux.prompt.msg1 }}"/>
  16.                 </view>
  17.                 <view class="weui-tab__content" hidden="{{ activeIndex != 1 }}">
  18.                     <template is="prompt" data="{{ ...$wux.prompt.msg2 }}"/>
  19.                 </view>
  20.                 <view class="weui-tab__content" hidden="{{ activeIndex != 2 }}">
  21.                     <template is="prompt" data="{{ ...$wux.prompt.msg3 }}"/>
  22.                 </view>
  23.             </view>
  24.         </view>
  25.     </view>
  26. </view>
复制代码
  1. const App = getApp()
  2. const sliderWidth = 96

  3. Page({  
  4.     data: {
  5.         tabs: ['全部', '待收货', '待评价'],
  6.         activeIndex: '0',
  7.         sliderOffset: 0,
  8.         sliderLeft: 0
  9.     },
  10.     onLoad() {
  11.         this.$wuxPrompt = App.wux(this).$wuxPrompt
  12.         this.$wuxPrompt.render('msg1', {
  13.             title: '空空如也',
  14.             text: '暂时没有相关数据',
  15.         }).show()

  16.         this.$wuxPrompt.render('msg2', {
  17.             icon: '../../assets/images/iconfont-order.png',
  18.             title: '您还没有相关的订单',
  19.             text: '可以去看看有哪些想买',
  20.             buttons: [
  21.                 {
  22.                     text: '随便逛逛'
  23.                 }
  24.             ],
  25.             buttonClicked(index, item) {
  26.                 console.log(index, item)
  27.             },
  28.         }).show()

  29.         this.$wuxPrompt.render('msg3', {
  30.             icon: '../../assets/images/iconfont-empty.png',
  31.             title: '暂无待评价订单',
  32.         }).show()

  33.         this.getSystemInfo()
  34.     },
  35.     getSystemInfo() {
  36.         const that = this
  37.         wx.getSystemInfo({
  38.             success(res) {
  39.                 that.setData({
  40.                     sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
  41.                 })
  42.             }
  43.         })
  44.     },
  45.     tabClick(e) {
  46.         this.setData({
  47.             sliderOffset: e.currentTarget.offsetLeft,
  48.             activeIndex: e.currentTarget.id,
  49.         })
  50.     },
  51. })
复制代码

回复 支持 反对

使用道具 举报

最佳答案
0 

6

主题

20

帖子

652

积分

专家路上

积分
652
 楼主| 发表于 2017-2-13 17:27:53 | 显示全部楼层
Qrcode
  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">Qrcode</view>
  4.         <view class="page__desc">二维码</view>
  5.     </view>
  6.     <view class="page__bd">
  7.         <view class="weui-cells__title">请输入文字,即时输入即时生成</view>
  8.         <view class="weui-cells weui-cells_after-title">
  9.             <view class="weui-cell">
  10.                 <view class="weui-cell__bd">
  11.                     <textarea value="{{ value }}" bindinput="bindinput" class="weui-textarea" placeholder="支持文本、网址和电子邮箱" style="height: 4.2em" maxlength="300" />
  12.                     <view class="weui-textarea-counter">{{ value.length }}/300</view>
  13.                 </view>
  14.             </view>
  15.         </view>
  16.         <view class="weui-cells__tips">提示:Canvas在微信中无法长按识别</view>
  17.         <canvas style="width: 200px; height: 200px; margin: 30px auto;" canvas-id="qrcode"></canvas>
  18.     </view>
  19. </view>
复制代码
  1. const App = getApp()

  2. Page({
  3.     data: {
  4.         value: '',
  5.     },
  6.     onLoad() {
  7.         this.$wuxQrcode = App.wux(this).$wuxQrcode

  8.         this.$wuxQrcode.init('qrcode', 'wux')
  9.     },
  10.     bindinput(e) {
  11.         const value = e.detail.value

  12.         this.setData({
  13.             value,
  14.         })

  15.         this.$wuxQrcode.init('qrcode', value)
  16.     },
  17. })
复制代码
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com