Skip to content

U
uni-app

DCloud / uni-app

通知 702
Star 38703
Fork 3642
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 0d05a039 编写于 作者: 郭 郭胜强
浏览文件
操作

增加vant组件和wux组件示例

上级 e0e6238c
展开全部 隐藏空白更改
内联 并排
Showing with 2045 addition and 22 deletion
examples/wxcomponents-template/App.vue
浏览文件 @ 0d05a039
......@@ -14,13 +14,12 @@
<style>
/*每个页面公共css */
page,
view {
display: flex;/* uni-app默认使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。如不了解flex布局，请参考http://www.w3.org/TR/css3-flexbox/。若不需要flex布局可删除本行*/
}
page {
min-height: 100%;
min-height: 100%;
background: #ECECEC;
}
.title{
padding: 10px;
text-align: center;
}
</style>
examples/wxcomponents-template/pages.json
浏览文件 @ 0d05a039
......@@ -3,13 +3,34 @@
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
"navigationBarTitleText": "小程序组件示例"
}
},
{
"path": "pages/vant/vant",
"style": {
"navigationBarTitleText": "vant组件示例",
"usingComponents": {
"van-nav-bar": "/wxcomponents/vant-weapp/dist/nav-bar/index",
"van-icon": "/wxcomponents/vant-weapp/dist/icon/index"
}
}
},
{
"path": "pages/wux/wux",
"style": {
"navigationBarTitleText": "wux组件示例",
"usingComponents": {
"wux-calendar": "/wxcomponents/wux-weapp/dist/calendar/index",
"wux-cell-group": "/wxcomponents/wux-weapp/dist/cell-group/index",
"wux-cell": "/wxcomponents/wux-weapp/dist/cell/index"
}
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarTitleText": "小程序组件示例",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
......
examples/wxcomponents-template/pages/index/index.vue
浏览文件 @ 0d05a039
<template>
<view class="content">
<text class="title">{{title}}</text>
<navigator url="../vant/vant">
<button type="default">vant组件示例</button>
</navigator>
<navigator url="../wux/wux">
<button type="default">wux组件示例</button>
</navigator>
</view>
</template>
<script>
export default {
data: {
title: 'Hello'
}
}
</script>
<style>
.content {
flex: 1;
justify-content: center;
align-items: center;
}
.title {
font-size: 36upx;
color: #8f8f94;
button {
margin-top: 20px;
}
</style>
examples/wxcomponents-template/pages/vant/vant.vue 0 → 100644
浏览文件 @ 0d05a039
<template>
<view>
<view class="title">导航栏</view>
<van-nav-bar title="标题" left-text="返回" left-arrow @clickLeft="onClickLeft" @clickRight="onClickRight">
<van-icon name="search" slot="right" custom-class="icon" />
</van-nav-bar>
</view>
</template>
<script>
export default {
methods: {
onClickLeft() {
wx.showToast({
title: '点击返回',
icon: 'none'
});
},
onClickRight() {
wx.showToast({
title: '点击按钮',
icon: 'none'
});
}
}
}
</script>
<style>
</style>
examples/wxcomponents-template/pages/wux/wux.vue 0 → 100644
浏览文件 @ 0d05a039
<template>
<view>
<view class="title">日历组件</view>
<wux-calendar id="wux-calendar" />
<wux-cell-group title="Calendar">
<wux-cell title="单选" :extra="value1" @click="openCalendar1"></wux-cell>
<wux-cell title="多选" :extra="value2" @click="openCalendar2"></wux-cell>
<wux-cell title="Direction = Vertical" :extra="value3" @click="openCalendar3"></wux-cell>
<wux-cell title="MinDate & MaxDate" :extra="value4" @click="openCalendar4"></wux-cell>
</wux-cell-group>
</view>
</template>
<script>
import {
$wuxCalendar
} from '@/wxcomponents/wux-weapp/dist/index.js'
export default {
data() {
return {
value1: [],
value2: [],
value3: [],
value4: [],
}
},
methods: {
openCalendar1() {
$wuxCalendar().open({
value: this.value1,
onChange: (values, displayValues) => {
console.log('onChange', values, displayValues)
this.value1 = displayValues
},
})
},
openCalendar2() {
$wuxCalendar().open({
value: this.value2,
multiple: true,
onChange: (values, displayValues) => {
console.log('onChange', values, displayValues)
this.value2 = displayValues
},
})
},
openCalendar3() {
$wuxCalendar().open({
value: this.value3,
direction: 'vertical',
onChange: (values, displayValues) => {
console.log('onChange', values, displayValues)
this.value3 = displayValues
},
})
},
openCalendar4() {
const now = new Date()
const minDate = now.getTime()
const maxDate = now.setDate(now.getDate() + 7)
$wuxCalendar().open({
value: this.value4,
minDate,
maxDate,
onChange: (values, displayValues) => {
console.log('onChange', values, displayValues)
this.value4 = displayValues
},
})
}
}
}
</script>
<style>
</style>
examples/wxcomponents-template/wxcomponents/vant-weapp/dist/icon/index.js 0 → 100644
浏览文件 @ 0d05a039
import { create } from '../common/create';
create({
props: {
info: null,
name: String,
size: String,
color: String,
classPrefix: {
type: String,
value: 'van-icon'
}
},
methods: {
onClick() {
this.$emit('click');
}
}
});
examples/wxcomponents-template/wxcomponents/vant-weapp/dist/icon/index.wxml 0 → 100644
浏览文件 @ 0d05a039
<view
class="custom-class {{ classPrefix }} {{ classPrefix }}-{{ name }}"
style="{{ color ? 'color: ' + color : '' }}; {{ size ? 'font-size: ' + size : '' }}"
bind:tap="onClick"
>
<view wx:if="{{ info !== null }}" class="van-icon__info">{{ info }}</view>
</view>
examples/wxcomponents-template/wxcomponents/vant-weapp/dist/icon/index.wxss 0 → 100644
浏览文件 @ 0d05a039
@font-face{font-style:normal;font-weight:400;font-family:vant-icon;src:url(https://img.yzcdn.cn/vant/vant-icon-76f274.ttf) format('truetype')}.van-icon{position:relative;display:inline-block;font:normal normal normal 14px/1 vant-icon;font-size:inherit;text-rendering:auto}.van-icon__info{color:#fff;left:100%;top:-.5em;font-size:.5em;padding:0 .3em;text-align:center;min-width:1.2em;line-height:1.2;position:absolute;border-radius:.6em;box-sizing:border-box;background-color:#f44;-webkit-transform:translateX(-50%);transform:translateX(-50%);font-family:PingFang SC,Helvetica Neue,Arial,sans-serif}.van-icon::before{display:inline-block}.van-icon-add-o::before{content:"\F000"}.van-icon-add::before{content:"\F001"}.van-icon-add2::before{content:"\F002"}.van-icon-after-sale::before{content:"\F003"}.van-icon-aim::before{content:"\F004"}.van-icon-alipay::before{content:"\F005"}.van-icon-arrow-left::before{content:"\F006"}.van-icon-arrow::before{content:"\F007"}.van-icon-balance-pay::before{content:"\F008"}.van-icon-browsing-history::before{content:"\F009"}.van-icon-card::before{content:"\F00A"}.van-icon-cart::before{content:"\F00B"}.van-icon-cash-back-record::before{content:"\F00C"}.van-icon-cash-on-deliver::before{content:"\F00D"}.van-icon-certificate::before{content:"\F00E"}.van-icon-chat::before{content:"\F00F"}.van-icon-check::before{content:"\F010"}.van-icon-checked::before{content:"\F011"}.van-icon-clear::before{content:"\F012"}.van-icon-clock::before{content:"\F013"}.van-icon-close::before{content:"\F014"}.van-icon-completed::before{content:"\F015"}.van-icon-contact::before{content:"\F016"}.van-icon-coupon::before{content:"\F017"}.van-icon-credit-pay::before{content:"\F018"}.van-icon-debit-pay::before{content:"\F019"}.van-icon-delete::before{content:"\F01A"}.van-icon-description::before{content:"\F01B"}.van-icon-discount::before{content:"\F01C"}.van-icon-ecard-pay::before{content:"\F01D"}.van-icon-edit-data::before{content:"\F01E"}.van-icon-edit::before{content:"\F01F"}.van-icon-exchange-record::before{content:"\F020"}.van-icon-exchange::before{content:"\F021"}.van-icon-fail::before{content:"\F022"}.van-icon-free-postage::before{content:"\F023"}.van-icon-gift-card-pay::before{content:"\F024"}.van-icon-gift-card::before{content:"\F025"}.van-icon-gift::before{content:"\F026"}.van-icon-gold-coin::before{content:"\F027"}.van-icon-goods-collect::before{content:"\F028"}.van-icon-home::before{content:"\F029"}.van-icon-hot-sale::before{content:"\F02A"}.van-icon-hot::before{content:"\F02B"}.van-icon-idcard::before{content:"\F02C"}.van-icon-info-o::before{content:"\F02D"}.van-icon-like-o::before{content:"\F02E"}.van-icon-like::before{content:"\F02F"}.van-icon-location::before{content:"\F030"}.van-icon-logistics::before{content:"\F031"}.van-icon-more-o::before{content:"\F032"}.van-icon-more::before{content:"\F033"}.van-icon-new-arrival::before{content:"\F034"}.van-icon-new::before{content:"\F035"}.van-icon-other-pay::before{content:"\F036"}.van-icon-passed::before{content:"\F037"}.van-icon-password-not-view::before{content:"\F038"}.van-icon-password-view::before{content:"\F039"}.van-icon-pause::before{content:"\F03A"}.van-icon-peer-pay::before{content:"\F03B"}.van-icon-pending-deliver::before{content:"\F03C"}.van-icon-pending-evaluate::before{content:"\F03D"}.van-icon-pending-orders::before{content:"\F03E"}.van-icon-pending-payment::before{content:"\F03F"}.van-icon-phone::before{content:"\F040"}.van-icon-photo::before{content:"\F041"}.van-icon-photograph::before{content:"\F042"}.van-icon-play::before{content:"\F043"}.van-icon-point-gift::before{content:"\F044"}.van-icon-points-mall::before{content:"\F045"}.van-icon-points::before{content:"\F046"}.van-icon-qr-invalid::before{content:"\F047"}.van-icon-qr::before{content:"\F048"}.van-icon-question::before{content:"\F049"}.van-icon-receive-gift::before{content:"\F04A"}.van-icon-records::before{content:"\F04B"}.van-icon-search::before{content:"\F04C"}.van-icon-send-gift::before{content:"\F04D"}.van-icon-setting::before{content:"\F04E"}.van-icon-share::before{content:"\F04F"}.van-icon-shop-collect::before{content:"\F050"}.van-icon-shop::before{content:"\F051"}.van-icon-shopping-cart::before{content:"\F052"}.van-icon-sign::before{content:"\F053"}.van-icon-stop::before{content:"\F054"}.van-icon-success::before{content:"\F055"}.van-icon-tosend::before{content:"\F056"}.van-icon-underway::before{content:"\F057"}.van-icon-upgrade::before{content:"\F058"}.van-icon-value-card::before{content:"\F059"}.van-icon-wap-home::before{content:"\F05A"}.van-icon-wap-nav::before{content:"\F05B"}.van-icon-warn::before{content:"\F05C"}.van-icon-wechat::before{content:"\F05D"}
\ No newline at end of file
examples/wxcomponents-template/wxcomponents/vant-weapp/dist/nav-bar/index.js 0 → 100644
浏览文件 @ 0d05a039
import { create } from '../common/create';
create({
classes: ['title-class'],
props: {
title: String,
leftText: String,
rightText: String,
leftArrow: Boolean,
fixed: Boolean,
zIndex: {
type: Number,
value: 1
}
},
methods: {
onClickLeft() {
this.$emit('clickLeft');
},
onClickRight() {
this.$emit('clickRight');
}
}
});
examples/wxcomponents-template/wxcomponents/vant-weapp/dist/nav-bar/index.json 0 → 100644
浏览文件 @ 0d05a039
{
"component": true,
"usingComponents": {
"van-icon": "../icon/index"
}
}
examples/wxcomponents-template/wxcomponents/vant-weapp/dist/nav-bar/index.wxml 0 → 100644
浏览文件 @ 0d05a039
<view
class="custom-class van-nav-bar van-hairline--bottom {{ fixed ? 'van-nav-bar--fixed' : '' }}"
style="z-index: {{ zIndex }}"
>
<view class="van-nav-bar__left" bind:tap="onClickLeft">
<block wx:if="{{ leftArrow || leftText }}">
<van-icon
wx:if="{{ leftArrow }}"
name="arrow"
custom-class="van-nav-bar__arrow"
/>
<view wx:if="{{ leftText }}" class="van-nav-bar__text">{{ leftText }}</view>
</block>
<slot wx:else name="left" />
</view>
<view class="van-nav-bar__title title-class van-ellipsis">
<block wx:if="{{ title }}">{{ title }}</block>
<slot wx:else name="title" />
</view>
<view class="van-nav-bar__right" bind:tap="onClickRight">
<view wx:if="{{ rightText }}" class="van-nav-bar__text">{{ rightText }}</view>
<slot wx:else name="right" />
</view>
</view>
examples/wxcomponents-template/wxcomponents/vant-weapp/dist/nav-bar/index.wxss 0 → 100644
浏览文件 @ 0d05a039
.van-nav-bar{height:46px;position:relative;-webkit-user-select:none;user-select:none;text-align:center;line-height:46px;background-color:#fff}.van-nav-bar__arrow{color:#38f;vertical-align:middle;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.van-nav-bar__arrow+.van-nav-bar__text{margin-left:-20px;padding-left:25px}.van-nav-bar--fixed{top:0;left:0;width:100%;position:fixed}.van-nav-bar__title{margin:0 auto;max-width:60%;font-size:16px}.van-nav-bar__left,.van-nav-bar__right{bottom:0;font-size:14px;position:absolute}.van-nav-bar__left{left:15px}.van-nav-bar__right{right:15px}.van-nav-bar__text{color:#38f;margin:0 -15px;padding:0 15px;display:inline-block;vertical-align:middle}.van-nav-bar__text:active{background-color:#e8e8e8}
\ No newline at end of file
examples/wxcomponents-template/wxcomponents/wux-weapp/.babelrc 0 → 100644
浏览文件 @ 0d05a039
{
"presets": ["env"]
}
\ No newline at end of file
examples/wxcomponents-template/wxcomponents/wux-weapp/dist/calendar/index.json 0 → 100644
浏览文件 @ 0d05a039
{
"component": true,
"usingComponents": {
"wux-animation-group": "../animation-group/index",
"wux-backdrop": "../backdrop/index"
}
}
\ No newline at end of file
examples/wxcomponents-template/wxcomponents/wux-weapp/dist/calendar/index.wxml 0 → 100644
浏览文件 @ 0d05a039
<wux-backdrop id="wux-backdrop" bind:click="close" />
<wux-animation-group wux-class="wux-calendar" in="{{ in }}" class-names="wux-animate--slideInUp">
<view class="wux-calendar__content {{ inline ? 'wux-calendar--inline' : '' }} {{ direction === 'vertical' ? 'wux-calendar--vertical' : 'wux-calendar--horizontal' }}">
<view class="wux-calendar__hd" wx:if="{{ toolbar }}">
<view class="wux-calendar__toolbar">
<view class="wux-calendar__picker">
<view class="wux-calendar__link" bindtap="prevMonth">
<view class="wux-calendar__icon wux-calendar__icon--prev"></view>
</view>
<view class="wux-calendar__value">{{ currentMonthName }}</view>
<view class="wux-calendar__link" bindtap="nextMonth">
<view class="wux-calendar__icon wux-calendar__icon--next"></view>
</view>
</view>
<view class="wux-calendar__picker">
<view class="wux-calendar__link" bindtap="prevYear">
<view class="wux-calendar__icon wux-calendar__icon--prev"></view>
</view>
<text class="wux-calendar__value">{{ currentYear }}</text>
<view class="wux-calendar__link" bindtap="nextYear">
<view class="wux-calendar__icon wux-calendar__icon--next"></view>
</view>
</view>
</view>
</view>
<view class="wux-calendar__bd">
<view class="wux-calendar__weekdays" wx:if="{{ weekHeader }}">
<block wx:for="{{ weeks }}" wx:key="">
<view class="wux-calendar__weekday {{ item.weekend ? 'wux-calendar__weekday--weekend' : '' }}">
{{ item.dayName }}
</view>
</block>
</view>
<view class="wux-calendar__months">
<view class="wux-calendar__months-content" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd" style="{{ wrapperTranslate }}">
<block wx:for="{{ months }}" wx:for-item="month" wx:key="">
<view data-year="{{ month.year }}" data-month="{{ month.month }}" class="wux-calendar__month {{ index === 0 ? 'wux-calendar__month--prev' : index === 1 ? 'wux-calendar__month--current' : 'wux-calendar__month--next' }}" style="{{ monthsTranslate[index] }}">
<block wx:for="{{ month.items }}" wx:for-item="row" wx:key="">
<view class="wux-calendar__days">
<block wx:for="{{ row }}" wx:for-item="col" wx:key="">
<view data-year="{{ col.year }}" data-month="{{ col.month }}" data-day="{{ col.day }}" data-date="{{ col.date }}" data-type="{{ col.type }}" class="wux-calendar__day {{ col.type.prev ? 'wux-calendar__day--prev' : '' }} {{ col.type.next ? 'wux-calendar__day--next' : '' }} {{ col.type.today ? 'wux-calendar__day--today' : '' }} {{ col.type.selected ? 'wux-calendar__day--selected' : '' }} {{ col.type.weekend ? 'wux-calendar__day--weekend' : '' }} {{ col.type.disabled ? 'wux-calendar__day--disabled' : '' }}" bindtap="onDayClick">
<text class="wux-calendar__text">{{ col.day }}</text>
</view>
</block>
</view>
</block>
</view>
</block>
</view>
</view>
</view>
</view>
</wux-animation-group>
\ No newline at end of file
examples/wxcomponents-template/wxcomponents/wux-weapp/dist/calendar/index.wxss 0 → 100644
浏览文件 @ 0d05a039
.wux-calendar {
position: fixed;
left: 0;
bottom: 0;
height: 13rem;
z-index: 1500;
background: #cfd5da;
background: #fff;
height: 600rpx;
width: 100%;
overflow: hidden;
}
.wux-calendar__content {
position: relative;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform .3s;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
}
.wux-calendar__bd {
height: 100%;
position: relative;
overflow: hidden;
}
.wux-calendar__hd {
position: relative;
width: 100%;
}
.wux-calendar__hd:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: auto;
right: auto;
height: 2rpx;
width: 100%;
background-color: #999999;
display: block;
z-index: 15;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.wux-calendar__hd + .wux-calendar__bd {
height: calc(97.8%);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.wux-calendar__hd:before {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
.wux-calendar__hd:before {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
.wux-calendar--inline {
display: block;
position: relative;
z-index: inherit;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.wux-calendar--inline .wux-calendar__hd:before {
display: none;
}
.wux-calendar--inline .wux-calendar__hd:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto;
height: 2rpx;
width: 100%;
background-color: #999999;
display: block;
z-index: 15;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.wux-calendar--inline .wux-calendar__hd:after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
.wux-calendar--inline .wux-calendar__hd:after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
@media (orientation: landscape) and (max-height: 830rpx) {
.wux-calendar:not(.wux-calendar--inline) {
height: 440rpx;
}
}
.wux-calendar__toolbar {
height: 2.2rem;
display: -webkit-box;
display: -webkit-flex;
display: flex;
text-align: center;
}
.wux-calendar__picker {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
width: 50%;
max-width: 400rpx;
-webkit-flex-shrink: 10;
flex-shrink: 10;
display: block;
line-height: 2.2rem;
}
.wux-calendar__link {
float: left;
width: 25%;
height: 2.2rem;
line-height: 2rem;
min-width: 72rpx;
}
.wux-calendar__icon {
display: inline-block;
vertical-align: middle;
background-size: 100% auto;
background-position: center;
}
.wux-calendar__icon--next,
.wux-calendar__icon--prev {
width: 0.75rem;
height: 0.75rem;
}
.wux-calendar__icon--next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%23007aff'%20d%3D'M1%2C1.6l11.8%2C5.8L1%2C13.4V1.6%20M0%2C0v15l15-7.6L0%2C0L0%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.wux-calendar__icon--prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%23007aff'%20d%3D'M14%2C1.6v11.8L2.2%2C7.6L14%2C1.6%20M15%2C0L0%2C7.6L15%2C15V0L15%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.wux-calendar__value {
-webkit-flex-shrink: 1;
flex-shrink: 1;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
float: left;
width: 50%;
height: 2.2rem;
}
.wux-calendar__weekdays {
height: 36rpx;
background: #f7f7f8;
display: -webkit-box;
display: -webkit-flex;
display: flex;
font-size: 22rpx;
box-sizing: border-box;
position: relative;
}
.wux-calendar__weekdays:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto;
height: 2rpx;
width: 100%;
background-color: #c4c4c4;
display: block;
z-index: 15;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.wux-calendar__weekdays + .wux-calendar__months {
height: calc(82%);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.wux-calendar__weekdays:after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
.wux-calendar__weekdays:after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
.wux-calendar__weekday {
-webkit-flex-shrink: 1;
flex-shrink: 1;
width: 14.28571429%;
width: calc(14.28571429%);
line-height: 34rpx;
text-align: center;
}
.wux-calendar__months {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.wux-calendar__months-content {
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: relative;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.wux-calendar__month {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.wux-calendar__days {
height: 16.66666667%;
height: calc(16.66666667%);
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-shrink: 1;
flex-shrink: 1;
width: 100%;
position: relative;
}
.wux-calendar__days:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto;
height: 2rpx;
width: 100%;
background-color: #cccccc;
display: block;
z-index: 15;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.wux-calendar__days:last-child:after {
display: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.wux-calendar__days:after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
.wux-calendar__days:after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
.wux-calendar__day {
-webkit-flex-shrink: 1;
flex-shrink: 1;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
box-sizing: border-box;
width: 14.28571429%;
width: calc(14.28571429%);
text-align: center;
color: #3d4145;
font-size: 30rpx;
cursor: pointer;
}
.wux-calendar__day--prev,
.wux-calendar__day--next {
color: #cccccc;
}
.wux-calendar__day--disabled {
color: #d4d4d4;
cursor: auto;
}
.wux-calendar__day--today .wux-calendar__text {
background: #e3e3e3;
}
.wux-calendar__day--selected .wux-calendar__text {
background: #0894ec;
color: #fff;
}
.wux-calendar__text {
display: inline-block;
border-radius: 100%;
width: 60rpx;
height: 60rpx;
line-height: 60rpx;
}
examples/wxcomponents-template/wxcomponents/wux-weapp/dist/cell-group/index.js 0 → 100644
浏览文件 @ 0d05a039
Component({
externalClasses: ['wux-class'],
relations: {
'../cell/index': {
type: 'child',
linked() {
this.updateIsLastElement('../cell/index')
},
linkChanged() {
this.updateIsLastElement('../cell/index')
},
unlinked() {
this.updateIsLastElement('../cell/index')
},
},
},
properties: {
title: {
type: String,
value: '',
},
label: {
type: String,
value: '',
},
},
methods: {
updateIsLastElement() {
const elements = this.getRelationNodes('../cell/index')
if (elements.length > 0) {
const lastIndex = elements.length - 1
elements.forEach((element, index) => {
element.updateIsLastElement(index === lastIndex)
})
}
},
},
})
\ No newline at end of file
examples/wxcomponents-template/wxcomponents/wux-weapp/dist/cell-group/index.wxml 0 → 100644
浏览文件 @ 0d05a039
<view class="wux-class wux-cell-group">
<view class="wux-cell-group__hd" wx:if="{{ title }}">{{ title }}</view>
<view class="wux-cell-group__bd">
<slot></slot>
</view>
<view class="wux-cell-group__ft" wx:if="{{ label }}">{{ label }}</view>
</view>
\ No newline at end of file
examples/wxcomponents-template/wxcomponents/wux-weapp/dist/cell-group/index.wxss 0 → 100644
浏览文件 @ 0d05a039
.wux-cell-group__hd {
padding: 30rpx 30rpx 18rpx;
font-size: 28rpx;
color: #888;
width: 100%;
box-sizing: border-box;
}
.wux-cell-group__bd {
position: relative;
background-color: #fff;
}
.wux-cell-group__bd:after {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
border: 0 solid #D9D9D9;
border-top-width: 2rpx;
border-bottom-width: 2rpx;
}
.wux-cell-group__ft {
padding: 18rpx 30rpx 30rpx;
font-size: 28rpx;
color: #888;
}
examples/wxcomponents-template/wxcomponents/wux-weapp/dist/cell/index.js 0 → 100644
浏览文件 @ 0d05a039
Component({
externalClasses: ['wux-class'],
options: {
multipleSlots: true,
},
relations: {
'../cell-group/index': {
type: 'parent',
},
},
data: {
isLast: false,
},
properties: {
hoverClass: {
type: String,
value: 'wux-cell--hover',
},
thumb: {
type: String,
value: '',
},
title: {
type: String,
value: '',
},
label: {
type: String,
value: '',
},
extra: {
type: String,
value: '',
},
isLink: {
type: Boolean,
value: false,
},
openType: {
type: String,
value: 'navigateTo',
},
url: {
type: String,
value: '',
},
delta: {
type: Number,
value: 1,
},
},
methods: {
onTap() {
const { url, isLink, openType, delta } = this.data
const navigate = [
'navigateTo',
'redirectTo',
'switchTab',
'navigateBack',
'reLaunch',
]
this.triggerEvent('click')
if (!isLink || !url) {
return false
} else if (!navigate.includes(openType)) {
return console.warn('openType 属性可选值为 navigateTo、redirectTo、switchTab、navigateBack、reLaunch', openType)
} else if (openType === 'navigateBack') {
return wx[openType].call(wx, { delta })
} else {
return wx[openType].call(wx, { url })
}
},
updateIsLastElement(isLast) {
this.setData({ isLast })
},
},
})
\ No newline at end of file
examples/wxcomponents-template/wxcomponents/wux-weapp/dist/cell/index.wxml 0 → 100644
浏览文件 @ 0d05a039
<view bindtap="onTap" class="wux-class wux-cell {{ isLast ? 'wux-cell--last' : '' }} {{ isLink ? 'wux-cell--access' : '' }}" hover-class="{{ hoverClass }}">
<view class="wux-cell__hd">
<block wx:if="{{ thumb }}">
<image class="wux-cell__thumb" src="{{ thumb }}" />
</block>
<block wx:else>
<slot name="header"></slot>
</block>
</view>
<view class="wux-cell__bd">
<view wx:if="{{ title }}" class="wux-cell__text">{{ title }}</view>
<view wx:if="{{ label }}" class="wux-cell__desc">{{ label }}</view>
<slot></slot>
</view>
<view class="wux-cell__ft">
<block wx:if="{{ extra }}">{{ extra }}</block>
<block wx:else>
<slot name="footer"></slot>
</block>
</view>
</view>
\ No newline at end of file
examples/wxcomponents-template/wxcomponents/wux-weapp/dist/cell/index.wxss 0 → 100644
浏览文件 @ 0d05a039
.wux-cell {
padding: 20rpx 30rpx;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
background: #fff;
}
.wux-cell:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 2rpx;
border-bottom: 2rpx solid #D9D9D9;
color: #D9D9D9;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
left: 30rpx;
}
.wux-cell--last:after {
display: none;
}
.wux-cell--hover {
background-color: #ECECEC;
}
.wux-cell__thumb {
display: block;
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
}
.wux-cell__bd {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.wux-cell__text {
text-align: left;
}
.wux-cell__desc {
text-align: left;
line-height: 1.2;
font-size: 24rpx;
color: #808080;
}
.wux-cell__ft {
text-align: right;
color: #808080;
}
.wux-cell--access .wux-cell__ft {
padding-right: 26rpx;
position: relative;
}
.wux-cell--access .wux-cell__ft:after {
content: " ";
display: inline-block;
height: 12rpx;
width: 12rpx;
border-width: 4rpx 4rpx 0 0;
border-color: #C8C8CD;
border-style: solid;
-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
position: relative;
top: -4rpx;
position: absolute;
top: 50%;
margin-top: -8rpx;
right: 4rpx;
}
examples/wxcomponents-template/wxcomponents/wux-weapp/dist/countdown/index.js 0 → 100644
浏览文件 @ 0d05a039
class Countdown {
constructor(options = {}, page = getCurrentPages()[getCurrentPages().length - 1]) {
Object.assign(this, {
page,
options,
})
this.__init()
}
/**
* 初始化
*/
__init() {
this.setData = this.page.setData.bind(this.page)
this.restart(this.options)
}
/**
* 默认参数
*/
setDefaults() {
return {
date: `June 7, 2087 15:03:25`,
refresh: 1000,
offset: 0,
onEnd() {},
render(date) {},
}
}
/**
* 合并参数
*/
mergeOptions(options) {
const defaultOptions = this.setDefaults()
for (let i in defaultOptions) {
if (defaultOptions.hasOwnProperty(i)) {
this.options[i] = typeof options[i] !== `undefined` ? options[i] : defaultOptions[i]
if (i === `date` && typeof this.options.date !== `object`) {
this.options.date = new Date(this.options.date)
}
if (typeof this.options[i] === `function`) {
this.options[i] = this.options[i].bind(this)
}
}
}
if (typeof this.options.date !== `object`) {
this.options.date = new Date(this.options.date)
}
}
/**
* 计算日期差
*/
getDiffDate() {
let diff = (this.options.date.getTime() - Date.now() + this.options.offset) / 1000
let dateData = {
years: 0,
days: 0,
hours: 0,
min: 0,
sec: 0,
millisec: 0,
}
if (diff <= 0) {
if (this.interval) {
this.stop()
this.options.onEnd()
}
return dateData
}
if (diff >= (365.25 * 86400)) {
dateData.years = Math.floor(diff / (365.25 * 86400))
diff -= dateData.years * 365.25 * 86400
}
if (diff >= 86400) {
dateData.days = Math.floor(diff / 86400)
diff -= dateData.days * 86400
}
if (diff >= 3600) {
dateData.hours = Math.floor(diff / 3600)
diff -= dateData.hours * 3600
}
if (diff >= 60) {
dateData.min = Math.floor(diff / 60)
diff -= dateData.min * 60
}
dateData.sec = Math.round(diff)
dateData.millisec = diff % 1 * 1000
return dateData
}
/**
* 补零
*/
leadingZeros(num, length = 2) {
num = String(num)
if (num.length > length) return num
return (Array(length + 1).join(`0`) + num).substr(-length)
}
/**
* 更新组件
*/
update(newDate) {
this.options.date = typeof newDate !== `object` ? new Date(newDate) : newDate
this.render()
return this
}
/**
* 停止倒计时
*/
stop() {
if (this.interval) {
clearInterval(this.interval)
this.interval = !1
}
return this
}
/**
* 渲染组件
*/
render() {
this.options.render(this.getDiffDate())
return this
}
/**
* 启动倒计时
*/
start() {
if (this.interval) return !1
this.render()
if (this.options.refresh) {
this.interval = setInterval(() => {
this.render()
}, this.options.refresh)
}
return this
}
/**
* 更新offset
*/
updateOffset(offset) {
this.options.offset = offset
return this
}
/**
* 重启倒计时
*/
restart(options = {}) {
this.mergeOptions(options)
this.interval = !1
this.start()
return this
}
}
export default Countdown
\ No newline at end of file
examples/wxcomponents-template/wxcomponents/wux-weapp/dist/countup/index.js 0 → 100644
浏览文件 @ 0d05a039
class CountUp {
constructor(startVal, endVal, decimals, duration, options = {}, page = getCurrentPages()[getCurrentPages().length - 1]) {
Object.assign(this, {
page,
startVal,
endVal,
decimals,
duration,
options,
})
this.__init()
}
/**
* 初始化
*/
__init() {
this.setData = this.page.setData.bind(this.page)
this.lastTime = 0
// merge options
this.mergeOptions(this.options)
this.startVal = Number(this.startVal)
this.cacheVal = this.startVal
this.endVal = Number(this.endVal)
this.countDown = (this.startVal > this.endVal)
this.frameVal = this.startVal
this.decimals = Math.max(0, this.decimals || 0)
this.dec = Math.pow(10, this.decimals)
this.duration = Number(this.duration) * 1000 || 2000
// format startVal on initialization
this.printValue(this.formattingFn(this.startVal))
}
/**
* 默认参数
*/
setDefaultOptions() {
return {
useEasing: true, // toggle easing
useGrouping: true, // 1,000,000 vs 1000000
separator: `,`, // character to use as a separator
decimal: `.`, // character to use as a decimal
easingFn: null, // optional custom easing closure function, default is Robert Penner's easeOutExpo
formattingFn: null, // optional custom formatting function, default is this.formatNumber below
printValue(value) {}, // printValue
}
}
/**
* 合并参数
*/
mergeOptions(options) {
const defaultOptions = this.setDefaultOptions()
// extend default options with passed options object
for (let key in defaultOptions) {
if (defaultOptions.hasOwnProperty(key)) {
this.options[key] = typeof options[key] !== `undefined` ? options[key] : defaultOptions[key]
if (typeof this.options[key] === `function`) {
this.options[key] = this.options[key].bind(this)
}
}
}
if (this.options.separator === ``) { this.options.useGrouping = !1 }
if (!this.options.prefix) this.options.prefix = ``
if (!this.options.suffix) this.options.suffix = ``
this.easingFn = this.options.easingFn ? this.options.easingFn : this.easeOutExpo
this.formattingFn = this.options.formattingFn ? this.options.formattingFn : this.formatNumber
this.printValue = this.options.printValue ? this.options.printValue : function() {}
}
/**
* 创建定时器
*/
requestAnimationFrame(callback) {
let currTime = new Date().getTime()
let timeToCall = Math.max(0, 16 - (currTime - this.lastTime))
let timeout = setTimeout(() => {
callback.bind(this)(currTime + timeToCall)
}, timeToCall)
this.lastTime = currTime + timeToCall
return timeout
}
/**
* 清空定时器
*/
cancelAnimationFrame(timeout) {
clearTimeout(timeout)
}
/**
* 格式化数字
*/
formatNumber(nStr) {
nStr = nStr.toFixed(this.decimals)
nStr += ``
let x, x1, x2, rgx
x = nStr.split(`.`)
x1 = x[0]
x2 = x.length > 1 ? this.options.decimal + x[1] : ``
rgx = /(\d+)(\d{3})/
if (this.options.useGrouping) {
while (rgx.test(x1)) {
x1 = x1.replace(rgx, `$1` + this.options.separator + `$2`)
}
}
return this.options.prefix + x1 + x2 + this.options.suffix
}
/**
* 过渡效果
*/
easeOutExpo(t, b, c, d) {
return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b
}
/**
* 计数函数
*/
count(timestamp) {
if (!this.startTime) { this.startTime = timestamp }
this.timestamp = timestamp
const progress = timestamp - this.startTime
this.remaining = this.duration - progress
// to ease or not to ease
if (this.options.useEasing) {
if (this.countDown) {
this.frameVal = this.startVal - this.easingFn(progress, 0, this.startVal - this.endVal, this.duration)
} else {
this.frameVal = this.easingFn(progress, this.startVal, this.endVal - this.startVal, this.duration)
}
} else {
if (this.countDown) {
this.frameVal = this.startVal - ((this.startVal - this.endVal) * (progress / this.duration))
} else {
this.frameVal = this.startVal + (this.endVal - this.startVal) * (progress / this.duration)
}
}
// don't go past endVal since progress can exceed duration in the last frame
if (this.countDown) {
this.frameVal = (this.frameVal < this.endVal) ? this.endVal : this.frameVal
} else {
this.frameVal = (this.frameVal > this.endVal) ? this.endVal : this.frameVal
}
// decimal
this.frameVal = Math.round(this.frameVal * this.dec) / this.dec
// format and print value
this.printValue(this.formattingFn(this.frameVal))
// whether to continue
if (progress < this.duration) {
this.rAF = this.requestAnimationFrame(this.count)
} else {
if (this.callback) { this.callback() }
}
}
/**
* 启动计数器
*/
start(callback) {
this.callback = callback
this.rAF = this.requestAnimationFrame(this.count)
return !1
}
/**
* 停止计数器
*/
pauseResume() {
if (!this.paused) {
this.paused = !0
this.cancelAnimationFrame(this.rAF)
} else {
this.paused = !1
delete this.startTime
this.duration = this.remaining
this.startVal = this.frameVal
this.requestAnimationFrame(this.count)
}
}
/**
* 重置计数器
*/
reset() {
this.paused = !1
delete this.startTime
this.startVal = this.cacheVal
this.cancelAnimationFrame(this.rAF)
this.printValue(this.formattingFn(this.startVal))
}
/**
* 更新计数器
*/
update(newEndVal) {
this.cancelAnimationFrame(this.rAF)
this.paused = !1
delete this.startTime
this.startVal = this.frameVal
this.endVal = Number(newEndVal)
this.countDown = (this.startVal > this.endVal)
this.rAF = this.requestAnimationFrame(this.count)
}
}
export default CountUp
\ No newline at end of file
examples/wxcomponents-template/wxcomponents/wux-weapp/dist/index.js 0 → 100644
浏览文件 @ 0d05a039
import $wuxCountDown from './countdown/index'
import $wuxCountUp from './countup/index'
/**
* 使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象
* @param {String} selector 节点选择器
* @param {Object} ctx 页面栈或组件的实例，默认为当前页面栈实例
*/
const getCtx = (selector, ctx = getCurrentPages()[getCurrentPages().length - 1]) => {
const componentCtx = ctx.selectComponent(selector)
if (!componentCtx) {
throw new Error('无法找到对应的组件，请按文档说明使用组件')
}
return componentCtx
}
const $wuxActionSheet = (selector = '#wux-actionsheet', ctx) => getCtx(selector, ctx)
const $wuxBackdrop = (selector = '#wux-backdrop', ctx) => getCtx(selector, ctx)
const $wuxToast = (selector = '#wux-toast', ctx) => getCtx(selector, ctx)
const $wuxLoading = (selector = '#wux-loading', ctx) => getCtx(selector, ctx)
const $wuxDialog = (selector = '#wux-dialog', ctx) => getCtx(selector, ctx)
const $wuxToptips = (selector = '#wux-toptips', ctx) => getCtx(selector, ctx)
const $wuxGallery = (selector = '#wux-gallery', ctx) => getCtx(selector, ctx)
const $wuxNotification = (selector = '#wux-notification', ctx) => getCtx(selector, ctx)
const $wuxKeyBoard = (selector = '#wux-keyboard', ctx) => getCtx(selector, ctx)
const $wuxSelect = (selector = '#wux-select', ctx) => getCtx(selector, ctx)
const $wuxCalendar = (selector = '#wux-calendar', ctx) => getCtx(selector, ctx)
const $stopWuxRefresher = (selector = '#wux-refresher', ctx) => getCtx(selector, ctx).finishPullToRefresh()
export {
$wuxActionSheet,
$wuxBackdrop,
$wuxToast,
$wuxLoading,
$wuxDialog,
$wuxToptips,
$wuxGallery,
$wuxNotification,
$wuxKeyBoard,
$wuxSelect,
$wuxCalendar,
$stopWuxRefresher,
$wuxCountDown,
$wuxCountUp,
}
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或