Skip to content

Y
yunUI

恪愚 / yunUI
2022-11-02 05:11:01同步失败

通知 22
Star 9
Fork 0
Y
yunUI

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 56fbfe2a 编写于 作者: 恪愚's avatar 恪愚
浏览文件
操作

更新项目镜像

上级 f28c3f16
隐藏空白更改
内联 并排
Showing with 2004 addition and 328 deletion
README.md
浏览文件 @ 56fbfe2a
# yunUI（微信小程序自定义扩展组件库）
### 致力于“微信小程序”原生组件扩展组件开发 —— 功能更强大，使用更方便。
# yunUI（微信小程序自定义功能组件库）
### 致力于“微信小程序”原生组件扩展开发 —— 功能更强大，使用更方便。
## 现在有
- 扩展微信小程序原生日期-时间组件【picker】，使选择时间可精确到分、秒；优化软键盘弹出问题。兼容iPhone/Android
## 现收录有：
- 扩展微信小程序原生日期-时间组件【picker】，使选择时间可精确到分、秒；完美解决iPhone/Android软键盘弹出问题。
- “头条信息”组件【coupon】，采用slot，使控制更轻松
- “日历”组件【calendar】：使日期选择更便捷！可以支持选中得到当前选中日期、星期几，突出显示当前日期模块及某一天标记，**新增弹出方式，使更接近原生组件**。
- “日历”组件【calendar】：使日期选择更便捷！可以支持选中得到当前选中日期、星期几，突出显示当前日期模块及某一天标记，可以实现“心情签到”的功能，**现有直接使用和弹出两种方式，使更接近原生组件**。
- “侧边栏字母导航”组件【alphabet】：使用便捷，查找方便，更顺滑！
- “自定义弹窗”组件【ymodel】：自定义程度高，使用更便捷，体验更流畅！
- “自定义搜索栏”组件【ysearch】：支持多种搜索方式，高自定义程度，使用更流畅！
- “自定义卡片”组件【ycard】：支持图片、短文、图文三种形式，自定义展示样式，使用方便。
- **下雨/下雪js插件：位于utils文件夹下，使用(自带)canvas组件在页面中调用！**（具体效果见pages/RainSnow/）
- “自定义按钮button”组件【ybutton】：支持以图片覆盖原样式，支持倒计时按钮。（可应对常见“倒计时完成后才能触发按钮”的场景）
## 如何使用（仅为测试示例，具体请参照pages/下相关使用）
......@@ -18,13 +23,21 @@
"y-picker":"/components/yPicker/ypicker",
"y-coupon":"/components/coupon/coupon",
"y-calendar":"/components/calendar/calendar",
"y-alphabet":"../../components/alphabet/alphabet"
"y-alphabet":"/components/alphabet/alphabet",
"y-model":"/components/yModel/ymodel",
"y-search":"/components/ysearch/search",
"y-card":"/components/ycard/ycard",
"y-button":"/components/ybutton/ybutton"
}
```
```
//对于js插件来说
import xxx from '../../utils/effect' //路径需自己改下
```
**其余组件亦是如此！**
然后即可在wxml中按如下格式调用：
然后即可在wxml中按如下格式传参调用：
```
<y-picker slot="midR" time="{{time}}" size="right" color="#888888" defaulttext="请选择时间" seo="0" bind:bindMultiPickerChange="bindMultiPickerChange"></y-picker>
<y-coupon>
......@@ -34,18 +47,29 @@
</y-coupon>
<view>
<view class="select" bindtap="selected">选择时间</view>
<y-calendar wx:if="{{selected}}" before_show="0" task_show="1" dateTimes="{{dateTimes}}" bind:timeload="timeload" bind:timechanged="timechanged"></y-calendar>
<y-calendar wx:if="{{selected}}" before_show="0" task_show="1" yDateTimes="{{dateTimes}}" yEmotions="{{colors}}" yDayColor="{{DateColor}}" bind:timeload="timeload" bind:timechanged="timechanged"></y-calendar>
</view>
<y-alphabet list="{{list}}"></y-alphabet>
<y-model wx:if="{{show}}" center="{{center}}" md="{{md}}" title="{{title}}" fail="{{fail}}" suc="{{suc}}" bind:modelClosed="modelClosed" bind:modelcomplete="modelcomplete">
<view>
<view>sadas</view>
</view>
</y-model>
<y-search y_button="true" bind:search="Onsearch" bind:mousetap="Insearch" />
<y-card txtIndent="{{txtIndent}}" blog="{{blog}}"></y-card>
<canvas canvas-id="effect" id="effects"></canvas>
<y-button t_title="倒计时" times="7" title="开始决战吧" bind:click="bindleTap"></y-button>
```
并传参！
## 参数说明
### yPicker（日期扩展组件）
- open：true / false —— 是否启用已定义的颜色、字体大小 —— 必选
- size：left / center / right —— 自定义组件展示位置（默认为right） —— 可选
- color：颜色值（支持rgb、rgba、十六进制） —— 自定义选中日期后的文字颜色 —— 必选
- seo：0 / 1 —— 是否支持“精确到秒” —— 不填默认为0：精确到“分”（如果只精确到日，则用小程序自带picker即可。**本组件为微信小程序扩展组件！**），若为1时表示“精确到秒”！
- seo：0 / 1 —— 是否支持“精确到秒” —— 不填或默认为0：精确到“分”（如果只精确到日，则用小程序自带picker即可。**本组件为微信小程序扩展组件！**），若为1时表示“精确到秒”！
- holder：颜色值（支持rgb、rgba、十六进制） —— 自定义默认展示文字的颜色 ）—— 可选
- defaulttext: 默认展示文字，如果不填则会显示“请选择时间” —— 可选
- bind:bindMultiPickerChange：接收组件传回的事件名 —— 在其中接收参数e，直接取到“字符串”形式的选中日期，便于后续操作
......@@ -54,7 +78,9 @@
- 无
### calendar（“日历”组件）
- dateTimes：数组，可选 —— 如果填写的话则必须是数组-对象的形式，它用于为您提供在日历上显示某一天标记的功能：比如“10-1日显示国庆节” —— 强烈建议您注意格式：```[{day:'哪一天',target:'标记语'}]```（注意：day既可指“不带年份的某一天”也可指“具体哪一年哪一月哪一天”）
- yDateTimes：数组，可选 —— 如果填写的话则必须是数组-对象的形式，它用于为您提供在日历上显示某一天标记的功能：比如“10-1日显示国庆节” —— 强烈建议您注意格式如：```[{day:'哪一天',target:'标记语'}]```（注意：day既可指“不带年份的某一天”也可指“具体哪一年哪一月哪一天”）
- yDayColor：数组Array，可选 —— ```DateColor:[{day:'2021-5-1',serene:'serene'}]```，对象中第一个参数是当前签到日期，第二个是颜色对象中的键名。**注意：考虑到具体场景：一般签到后通过事件改变心情！还有就是一般都是在onload中读取本地保存的心情日期缓存（对，这个需要您每次触发时手动缓存）**（具体应用场景请看pages/calendar/calendar.js文件）
- yEmotions：对象Object，可选 —— 颜色映射表。```colors: {serene: '#64d9fe'}```，使用yDayColor和yEmotions时注意场景，比如你想要获取用户“开心”心情时标注不同颜色在日历上，此时你要在调用组件page中添加将“开心”和colors中的“serene”对应起来，然后通过上一个参数传入自定义组件！（具体应用场景请看pages/calendar/calendar.js文件第12、51行）
- before_show：Number，可选 —— 如果传0，则表示“要通过按钮事件触发弹出”，这种方式更接近原生组件弹出（从底部向上弹出，若传1则组件正常显示，你可以在组件引用外部包裹view标签并设置大小和位置！），更丝滑！**这时你要为自定义组件添加一个wx:if并通过事件改变其值**，注意：目前此组件只能通过if事件改变状态
- task_show：Number，可选 —— 控制遮罩层是否显示：为0时组件无遮罩层，为1时且在组件弹出时遮罩层显示——且当遮罩层被点击时组件收回。**我强烈建议您在选择弹出式组件显示时为此属性赋值为1！**
......@@ -63,9 +89,75 @@
- timechanged：使用同上，用来在选中某个日期时返回当前选中日期——接收一个参数e，其中包含有两个值：当前年月日和当前为周几以及当前日期节日显示
### alphabet
- list：数组，必填！其格式必须严格参照“pages/alphabet/alphabet.js”中list格式！
- list：数组，必填！其格式必须严格参照“pages/alphabet/alphabet.js”中list格式！（当数组第一项的alphabet属性值为top或Top时，触发显示为“回到页面顶部”）
- bind:selector：接收组件传回的事件名 —— 用户点击的某一条数据值
### ymodel
- center：0/1（number），可选。不传此参数时默认为0——内容以靠左展示（仿原生sheet弹窗），传值为1时表示内容部分居中展示
- title：String，可选。不传此参数时默认为“提示”（仿原生sheet弹窗标题部分）
- fail：String，可选。不传此参数时默认为“取消”，灰黑色（仿原生sheet弹窗取消按钮部分）
- suc：String，可选。不传此参数时默认为“确定”，鲜绿色（仿原生sheet弹窗确定按钮部分）
- md：String，可选。表示弹窗的宽度（由于内容部分允许传入，所以高度自适应），**其格式为“数字+百分号%”**，不传此参数时默认为“86%”
- **重点：** 此组件采用slot方式接收开发者传入“内容部分”，即：此组件允许子组件（子元素）的存在！而且不止一个！其格式参见上面“如何使用”中的```<y-model></y-model>```，您可以通过wx:if来控制组件的显示与隐藏（并且我强烈推荐用wx:if而不是hidden！）
### ysearch
- y_placeholder：String，可选。为无聚焦情况下搜索框中提示文字
- y_button：String（“true”/“false”），可选。默认为“false”（不传），此参数意义为“是否有input后面的button按钮”，当此参数为true时。代表你需要用点击“搜索”按钮的方式来查询，为false时表示需要用“监听键盘实时搜索”的方式查询
- but_title：String，可选。为右边按钮出现时按钮中文字，默认为“搜索”
- y_bgcolor_but：String，可选。为右边按钮背景颜色，默认为“#d43c33”：红色
- y_bgcolor_bar：String，可选。为搜索框背景颜色，默认为“#f5f5f5”：灰白色
- y_color：String，可选。为搜索框中用户输入文字颜色，默认为“black”：黑色
- y_center：String（“true”/“false”），可选。此参数决定初始是否采用居中形式。若传“true”（字符串），则在“聚焦”时会有一个动画效果（参见下面对应展示的效果三）
- y_vshow：Number，可选。此参数决定触发“提交”按钮后是否清空input框。**此参数在but_title为“false”时无效！（因为此时查询方式为“监听输入实时触发”）**
- bind:search：监听：search事件。在其中你接收一个event（或e），event（或e）.detail.keyword值为用户在input中输入的“查询条件”。**此参数在button传值为false时存在！**
- bind:mousetap：监听：mousetap事件。在其中你接收一个event（或e），event（或e）.detail.keyword值为用户在input中输入的“查询条件”。**此参数在button传值为true时存在！**
（当然，你可以让两个函数都存在，反正值是一样的，它们在组件中“被认为是不共存的”！你可以放心使用！）
### ycard
- txtIndent：0/1，可选。不填或传值为0时默认，表示“以短句形式展示”，即头部对其；若传值为1，表示“首行头部有缩进”
- blog：{} 对象格式，必填。它的属性有：avatarUrl：发帖人头像，可选，String类型（若传值为空会显示“暂无头像”的占位图）、createTime：发帖时间，必填，String类型，可传时间戳或标准格式（yyyy-MM-dd hh:mm:ss）、nickName：用户名，必填，String类型、content：短文内容，可选，String类型、img：图片，可选，Array类型，可有多张图片（**但建议都用网络图片！**），若用网络图片则可预览。
- ani：String类型，可选。此参数通常不写或为```ani="ani"```，若传值，则卡片有一个自下而上的动画过程。
- **blog对象的属性名必须保持一致！**
### js插件之“雨雪特效”
首先需要在onLoad中引入如下代码：获取宽度 —— 为了兼容机型
```
wx.getSystemInfo({
success: (res) => {
let width = res.windowWidth
this.setData({
width,
scale: width / 375
})
}
})
```
然后在比如检测到当前城市是下雪天气时在对应函数中引入如下代码：
```
const ctx = wx.createCanvasContext('effect')
let {width, scale} = this.data
// 768 为 CSS 中设置的 rpx 值
let height = 768 / 2 * scale
// 下雪
let rain=new Snow(ctx, width, height, {
amount: 100,
speedFactor: 0.03
})
// 跑起来
rain.run()
```
其中`new Snow()`那里是要传入参数：canvas对象、宽度、高度、以及对象{雨雪个数、下雨/下雪的速度}
最后调用run方法使特效出现！
### ybutton
- t_title：String类型。可选。默认值为“阅读倒计时”，这是显示倒计时时间时展示出来的文字（注意：这个参数只有在times参数存在时才有效）
- title：String类型。可选。默认值为“点击”，参数控制如果有倒计时则倒计时结束后按钮上展示的文字（无倒计时时直接展示在按钮上）
- inline：true/false，Bool类型。可选。此参数控制button元素是否以inline-block（行内块）形式展示
- times：String类型。可选。参数控制倒计时时间，无默认值。不传此参数时和原生button组件表现无异。且只支持String-数字形式的参数
- 其余参数及回调函数和原生button组件一致，请参见官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/button.html
## 展示
......@@ -74,24 +166,64 @@
### yPicker
具体使用见page/notice/notice
![自定义日期-时间组件](https://img-blog.csdnimg.cn/20201014153356164.gif#pic_center)
![自定义日期-时间组件](https://img-blog.csdnimg.cn/20201105191139777.gif#pic_center)
### coupon
具体使用见page/coupon/coupon
### calendar
具体使用见page/calendar/calendar
<br />
（1）
![自定义日历组件-方式1](https://img-blog.csdnimg.cn/20201014153403313.gif#pic_center)
（2）
![自定义日历组件-方式2](https://img-blog.csdnimg.cn/20201014153325679.gif#pic_center)
（3）
![自定义日历组件-心情签到](https://img-blog.csdnimg.cn/20210505145702226.gif#pic_center)
### alphabet
具体使用见pages/alphabet/alphabet
![自定义侧边字母导航组件](https://img-blog.csdnimg.cn/20201014153342166.gif#pic_center)
### ymodel
具体使用见pages/tdetail/tdetail
![自定义弹窗组件ymodel](https://img-blog.csdnimg.cn/20201030174513521.gif#pic_center)
### ysearch
具体使用见pages/search/search
（1）
![ysearch_one](https://img-blog.csdnimg.cn/20201101092957967.gif#pic_center)
（2）
![ysearch_two](https://img-blog.csdnimg.cn/20201101093016495.gif#pic_center)
（3）
![ysearch_thr](https://img-blog.csdnimg.cn/20201111192358158.gif#pic_center)
### ycard
具体使用见pages/card/card
![y_card](https://img-blog.csdnimg.cn/20201105191121536.gif#pic_center)
### ybutton
具体使用见pages/ybutton/ybutton
![u_button](https://img-blog.csdnimg.cn/20210425185454207.gif#pic_center)
## 联系作者
......
app.json
浏览文件 @ 56fbfe2a
{
"pages":[
"pages": [
"pages/index/index",
"pages/notices/notices",
"pages/tdetail/tdetail",
"pages/calendar/calendar",
"pages/coupon/coupon",
"pages/alphabet/alphabet"
"pages/alphabet/alphabet",
"pages/search/search",
"pages/card/card",
"pages/RainSnow/rainsnow",
"pages/ybutton/ybutton"
],
"window":{
"backgroundTextStyle":"light",
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "yunUI—微信小程序自定义扩展组件库",
"navigationBarTextStyle":"black"
"navigationBarTitleText": "yunUI(微信小程序自定义功能组件库)",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
}
\ No newline at end of file
components/alphabet/alphabet.js
浏览文件 @ 56fbfe2a
......@@ -6,7 +6,8 @@ Component({
properties: {
list:{
type:Array,
value:[]
value:[],
topNum:0
}
},
......@@ -36,9 +37,12 @@ Component({
*/
methods: {
handlerAlphaTap(e){
let {ap} = e.target.dataset
if(this.properties.list[0].alphabet=="Top" && (ap=="Top" || ap=="top")){
ap=this.properties.list[1].alphabet
let {ap,index} = e.target.dataset
if(index==0 && (ap=="Top" || ap=="top")){
this.setData({
topNum:this.data.topNum=0
})
return
}
this.setData({
alpha:ap
......
components/alphabet/alphabet.wxml
浏览文件 @ 56fbfe2a
<!-- 页面主要滚动区域 -->
<scroll-view scroll-y style="height: {{windowHeight}}" scroll-into-view="{{alpha}}">
<scroll-view scroll-y style="height: {{windowHeight}}" scroll-top="{{topNum}}" scroll-into-view="{{alpha}}">
<view class="alphabet">
<view class="alphabet-list">
<view wx:for="{{list}}" wx:key="unique" id="{{item.alphabet}}" class="section-item" wx:if="{{index!=0}}">
......@@ -18,7 +18,7 @@
<!-- 侧边栏字母导航 -->
<view data-id="selector" catchtouchstart="handlerAlphaTap" catchtouchmove="handlerMove" class="alphanet-selector">
<view data-ap="{{item.alphabet}}" wx:for="{{list}}" wx:key="unique" class="selector-one">
<view data-ap="{{item.alphabet}}" data-index="{{index}}" wx:for="{{list}}" wx:key="unique" class="selector-one">
{{item.alphabet}}
</view>
</view>
\ No newline at end of file
components/calendar/calendar.js
浏览文件 @ 56fbfe2a
......@@ -4,10 +4,20 @@ Component({
* 组件的属性列表
*/
properties: {
dateTimes:{
yDateTimes:{
type:Array,
value:[]
},
// 设置哪一天为什么颜色
yDayColor:{
type:Array,
value:[]
},
// 颜色映射表
yEmotions:{
type:Object,
value:{}
},
before_show:{ //是否作为日期组件由按钮触发弹出（为0时是）
type:Number,
value:1
......@@ -29,12 +39,21 @@ Component({
curMonth:0, //当前月份
daysCountArr:[31,28,31,30,31,30,31,31,30,31,30,31],
weekArr:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
// dateTimes:[{day:'10-1',target:'国庆节'},{day:'10-2',target:'中秋节'}],
dateList:[],
now_event:""
now_event:"",
},
observers:{
"yDayColor"(val){
// console.log(val)
if(val.length){
this.getDateList(this.data.curYear,this.data.curMonth-1,this.data.now_date);
}
}
},
lifetimes:{
// 在这个生命周期中只能拿到传参的初始值(就是页面data中的值)
attached(){
var today=new Date();
var curYear=today.getFullYear();
......@@ -48,13 +67,18 @@ Component({
curYear,
curMonth,
selectedDate,
now_selectedDate:selectedDate,
selectedWeek,
now_date,
now_selectedDate:selectedDate,
closed:true
})
// // 初始化事件、传来的节日标注、style
this.getDateList(curYear,curMonth-1,now_date);
this.triggerEvent('timeload',{selectedDate,selectedWeek,event:this.data.now_event})
},
ready(){
// 初始化事件、传来的节日标注、style
// this.getDateList(this.data.curYear,this.data.curMonth-1,this.data.now_date);
}
},
......@@ -64,8 +88,11 @@ Component({
methods: {
getDateList(y,mon,now_date){
var vm=this;
let _year=new Date();
let _dayColor=this.data.yDayColor;
let _emotion=this.data.yEmotions;
var daysCountArr=this.data.daysCountArr;
if(y%4===0 && y%100!=0){
if(y%4==0 && y%100!=0 || y%400==0){
this.data.daysCountArr[1]=29;
this.setData({
daysCountArr
......@@ -82,20 +109,25 @@ Component({
date:i+1,
week:week
});
// console.log(this.properties.dateTimes)
for(let k in vm.data.dateTimes){
for(let k in vm.data.yDateTimes){
for(let j in dateList[weekIndex]){
if(dateList[weekIndex][j].dateTime==vm.properties.dateTimes[k].day){
dateList[weekIndex][j].event=vm.properties.dateTimes[k].target
if(dateList[weekIndex][j].dateTime==vm.properties.yDateTimes[k].day){
dateList[weekIndex][j].event=vm.properties.yDateTimes[k].target
}
if(dateList[weekIndex][j].value==vm.properties.dateTimes[k].day){
dateList[weekIndex][j].event=vm.properties.dateTimes[k].target
if(dateList[weekIndex][j].value==vm.properties.yDateTimes[k].day){
dateList[weekIndex][j].event=vm.properties.yDateTimes[k].target
}
if(now_date==vm.properties.dateTimes[k].day){
if(now_date==vm.properties.yDateTimes[k].day){
vm.setData({
now_event:vm.properties.dateTimes[k].target
now_event:vm.properties.yDateTimes[k].target
})
}
// 判断当前日期是不是设置了心情的日期
for(let m of _dayColor){
if(dateList[weekIndex][j].value==m.day || dateList[weekIndex][j].value==(`${_year.getFullYear()}-(${_year.getMonth()}+1)-${_year.getDate()}`)){
dateList[weekIndex][j].colors=_emotion[m.serene]
}
}
}
}
if(week==6){
......@@ -106,7 +138,7 @@ Component({
vm.setData({
dateList
})
},
selectDate(e){
var vm=this;
......
components/calendar/calendar.wxml
浏览文件 @ 56fbfe2a
......@@ -18,11 +18,11 @@
<view class="weekday_label">五</view>
<view class="weekday_label">六</view>
</view>
<view class="calendar_box" wx:for="{{dateList}}" wx:for-item="week"
<view class="calendar_box" wx:for="{{dateList}}" wx:key="*this" wx:for-item="week"
style="{{index==0?'justify-content:flex-end':''}}">
<!-- 此处view的data-不是为了向js传值，而只是自定义属性向css伪元素传attr() -->
<view class="weekday_label {{(item.value==selectedDate)?'active_date':''}} {{(item.value==now_selectedDate)?'active_dates':''}} {{(item.event)?'actived_date':''}}" wx:for="{{week}}" data-event="{{item.event}}">
<view class="" bindtap="selectDate" data-date="{{item}}">
<view class="weekday_label {{(item.value==selectedDate)?'active_date':''}} {{(item.value==now_selectedDate)?'active_dates':''}} {{(item.event)?'actived_date':''}}" wx:for="{{week}}" wx:key="*this" data-event="{{item.event}}">
<view class="" style="width:66%;border-radius:50%;text-align:center;background-color:{{item.colors?item.colors:'none'}}" bindtap="selectDate" data-date="{{item}}">
{{item.date}}</view>
</view>
</view>
......
components/calendar/calendar.wxss
浏览文件 @ 56fbfe2a
......@@ -10,8 +10,8 @@
bottom: 0;
left: 0;
z-index: 100000 !important;
animation: transfer 1.2s linear;
animation-delay: -.5s;
animation: transfer 1s linear;
animation-delay: -.4s;
}
@keyframes transfer{
0%{
......@@ -22,7 +22,7 @@
}
}
.calendar_unselect_date{
transition: all .8s ease;
transition: all .6s ease;
transform: translateY(100%);
}
......@@ -66,7 +66,7 @@
text-overflow: ellipsis;
white-space: nowrap;
}
.weekday_label>view{
.weekday_label > view{
box-sizing: border-box;
padding: 20%;
}
......@@ -77,7 +77,8 @@
}
.active_date{
background: rgba(0,0,0,.12);
color: rgba(0,0,0,.6);
color: white;
font-weight: bold;
overflow: hidden;
position: relative;
}
......
components/yModel/ymodel.js 0 → 100644
浏览文件 @ 56fbfe2a
// components/yModel/ymodel.js
Component({
/**
* 组件的属性列表
*/
properties: {
md:{
type:String,
value:'86%'
},
title:{
type:String,
value:'提示'
},
center:{
type:Number,
value:0
},
fail:{
type:String,
value:'取消'
},
suc:{
type:String,
value:'确定'
}
},
/**
* 组件的初始数据
*/
data: {
back:false
},
/**
* 组件的方法列表
*/
methods: {
trigger(){
// 根据是否有这个值（true）让模态框消失
setTimeout(()=>{
this.triggerEvent('modelClosed',true)
},300)
},
closed(){
// 点击了取消按钮
this.setData({
back:true
})
this.triggerEvent('modelcomplete',0)
},
completed(){
// 点击了确定按钮
this.setData({
back:true
})
this.triggerEvent('modelcomplete',1)
}
}
})
components/yModel/ymodel.json 0 → 100644
浏览文件 @ 56fbfe2a
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
components/yModel/ymodel.wxml 0 → 100644
浏览文件 @ 56fbfe2a
<view class="model_show {{(back)?'model_unshow':''}}">
<view class="ym_mask"></view>
<view class="ym_model" style="width:{{md}}">
<view class="ym_title">{{title}}</view>
<view class="ym_content {{center==1?'ym_center':''}}">
<slot></slot>
</view>
<view class="ym_button" catchtap="trigger">
<view class="ym_fail" hover-class="ym_fail_but" bindtap="closed">{{fail}}</view>
<view class="ym_complete" hover-class="ym_suc_but" bindtap="completed">{{suc}}</view>
</view>
</view>
</view>
\ No newline at end of file
components/yModel/ymodel.wxss 0 → 100644
浏览文件 @ 56fbfe2a
.model_show{
animation: opac .15s linear;
}
@keyframes opac{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.model_unshow{
transition: all .3s ease;
opacity: 0;
}
.ym_mask{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.47);
z-index: 10000000;
}
.ym_model{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 86%;
border-radius: 3px;
background-color: white;
z-index: 10000001;
overflow: hidden;
}
.ym_model .ym_title{
width: 100%;
height: 64rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 40rpx;
margin-bottom: 11rpx;
margin-top: 16rpx;
}
.ym_model .ym_content{
width: 100%;
color: rgba(0,0,0,.6);
font-size: 35rpx;
box-sizing: border-box;
padding: 0 20rpx;
margin-bottom: 114rpx;
}
.ym_model .ym_center{
display: flex;
flex-direction: column;
align-items: center;
}
.ym_model .ym_button{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 90rpx;
overflow: hidden;
display: flex;
align-items: center;
border-top: 1rpx solid rgba(0,0,0,.09);
}
.ym_button view{
width: calc(50% - 0.5rpx);
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 39rpx;
font-weight: 346;
}
.ym_button .ym_fail{
border-right: .45rpx solid rgba(0,0,0,.09);
transition: all .6s ease;
}
.ym_fail_but{
background-color: rgba(0,0,0,.096);
}
.ym_button .ym_complete{
color: rgb(0,255,0);
border-left: .45rpx solid rgba(0,0,0,.09);
transition: all .6s ease;
}
.ym_suc_but{
background-color: rgba(0,0,0,.096);
}
\ No newline at end of file
components/yPicker/ypicker.js
浏览文件 @ 56fbfe2a
......@@ -11,47 +11,32 @@ for (let i = meng_date.getFullYear()-10; i <= meng_date.getFullYear() + 10; i++)
}
//获取月份
for (let i = 1; i <= 12; i++) {
if (i < 10) {
i = "0" + i;
}
months.push("" + i);
months.push((i<10)?"0"+i:""+i);
}
//获取日期
for (let i = 1; i <= 31; i++) {
if (i < 10) {
i = "0" + i;
}
days.push("" + i);
days.push((i<10)?"0"+i:""+i);
}
//获取小时
for (let i = 0; i < 24; i++) {
if (i < 10) {
i = "0" + i;
}
hours.push("" + i);
hours.push((i<10)?"0"+i:""+i);
}
//获取分钟
for (let i = 0; i < 60; i++) {
if (i < 10) {
i = "0" + i;
}
minutes.push("" + i);
minutes.push((i<10)?"0"+i:""+i);
}
//获取秒数
for (let i = 0; i < 60; i++) {
if (i < 10) {
i = "0" + i;
}
seconds.push("" + i);
seconds.push((i<10)?"0"+i:""+i);
}
Component({
lifetimes:{
// 这时节点树已创建完成，开始可以用setData渲染节点，但还无法操作节点
attached:function(){
this.appd()
//设置默认的年份
//设置刚开始默认的年份
this.setData({
choose_year: this.data.multiArray[0][0]
choose_year: meng_date.getFullYear()
})
}
},
......@@ -90,106 +75,76 @@ Component({
*/
methods: {
appd(){
console.log(this.properties.seo)
this.setData({
multiArray: (!this.properties.seo==1)?[years, months, days, hours, minutes]:[years, months, days, hours, minutes,seconds],
multiIndex: (!this.properties.seo==1)?[10, meng_date.getMonth(), meng_date.getDate()-1, meng_date.getHours(), meng_date.getMinutes()]:[10, meng_date.getMonth(), meng_date.getDate()-1, meng_date.getHours(), meng_date.getMinutes(),meng_date.getSeconds()],
})
},
//获取时间日期 - 点进picker组件而什么也不干 && 每次触发完成后 -> 每次点击“确定”时携带值
bindMultiPickerChange: function(e) {
// console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
const index = this.data.multiIndex;
const year = this.data.multiArray[0][index[0]];
const month = this.data.multiArray[1][index[1]];
const day = this.data.multiArray[2][index[2]];
const hour = this.data.multiArray[3][index[3]];
const minute = this.data.multiArray[4][index[4]];
if(this.data.multiArray.length==6){
const second=this.data.multiArray[5][index[4]]
this.setData({
time: year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
})
}else{
bindMultiPickerChange: function(e) {
this.setData({
time: year + '-' + month + '-' + day + ' ' + hour + ':' + minute
multiIndex: e.detail.value
})
}
this.triggerEvent('bindMultiPickerChange',this.data.time)
},
//监听picker组件的每一列列表滚动事件
bindMultiPickerColumnChange: function(e) {
//获取年份
if (e.detail.column == 0) {
let choose_year = this.data.multiArray[e.detail.column][e.detail.value];
this.setData({
choose_year
})
}
//console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
if (e.detail.column == 1) {
let num = parseInt(this.data.multiArray[e.detail.column][e.detail.value]);
let temp = [];
if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判断31天的月份
for (let i = 1; i <= 31; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
const index = this.data.multiIndex;
const year = this.data.multiArray[0][index[0]];
const month = this.data.multiArray[1][index[1]];
const day = this.data.multiArray[2][index[2]];
const hour = this.data.multiArray[3][index[3]];
const minute = this.data.multiArray[4][index[4]];
if(this.data.multiArray.length==6){
const second=this.data.multiArray[5][index[4]]
this.setData({
['multiArray[2]']: temp //天数更新（根据月份）
});
} else if (num == 4 || num == 6 || num == 9 || num == 11) { //判断30天的月份
for (let i = 1; i <= 30; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
time: `${year}-${month}-${day} ${hour}:${minute}:${second}`
})
}else{
this.setData({
['multiArray[2]']: temp
});
} else if (num == 2) { //判断2月份天数
let year = parseInt(this.data.choose_year);
if (((year % 400 == 0) || (year % 100 != 0)) && (year % 4 == 0)) {
for (let i = 1; i <= 29; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
this.setData({
['multiArray[2]']: temp
});
} else {
for (let i = 1; i <= 28; i++) {
if (i < 10) {
i = "0" + i;
}
temp.push("" + i);
}
this.setData({
['multiArray[2]']: temp
});
}
time: `${year}-${month}-${day} ${hour}:${minute}`
})
}
// console.log(this.data.multiArray[2]);
this.triggerEvent('bindMultiPickerChange',this.data.time)
},
//监听picker组件的每一列列表滚动事件
bindMultiPickerColumnChange: function(e) {
const multiArray=this.data.multiArray,
multiIndex=this.data.multiIndex;
//获取年份
if (e.detail.column == 0) {
let choose_year = multiArray[e.detail.column][e.detail.value];
let choose_year_month=multiArray[1][multiIndex[1]]
this._drive(choose_year,choose_year_month)
this.setData({
choose_year
})
}
if (e.detail.column == 1) {
let _month = parseInt(multiArray[e.detail.column][e.detail.value]);
this._drive(this.data.choose_year,_month)
}
var data = {
multiArray: multiArray,
multiIndex: multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
this.setData(data);
},
// 表驱动优化if-else嵌套
_drive:function(choose_year,_month){
let temp = [];
const _year=choose_year,
_isLeapYear=_year%4==0 && _year%100!=0 || _year%400==0;
const monthDays=[31,_isLeapYear?29:28,31,30,31,30,31,31,30,31,30,31];
const _days=monthDays[_month-1];
for(let i=1;i<=_days;i++){
temp.push((i<10)?"0"+i:""+i);
}
this.setData({
['multiArray[2]']: temp
})
}
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
this.setData(data);
},
}
})
components/ybutton/ybutton.js 0 → 100644
浏览文件 @ 56fbfe2a
Component({
properties: {
t_title:{
type: String,
value:'阅读倒计时'
},
inline: {
type: Boolean,
value: false
},
shape: {
type: String,
value: 'normal'
},
type: {
type: String,
value: 'default'
},
long: {
type: Boolean,
value: false
},
bottom: {
type: Boolean,
value: false
},
title: {
type: String,
value: '点击'
},
icon: {
type: String,
value: ''
},
loading: {
type: Boolean,
value: false
},
disabled: {
type: Boolean,
value: false
},
times: {
type: String,
value: ''
},
openType: String,
appParameter: String,
hoverStopPropagation: Boolean,
hoverStartTime: {
type: Number,
value: 20
},
hoverStayTime: {
type: Number,
value: 70
},
lang: {
type: String,
value: 'en'
},
sessionFrom: {
type: String,
value: ''
},
sendMessageTitle: String,
sendMessagePath: String,
sendMessageImg: String,
showMessageCard: Boolean
},
data: {
time: 0,
originTitle: ''
},
lifetimes: {
attached: function () {
let _this = this
let _times = _this.data.times
let _time = 0
if (_times) {
_time = parseInt(_times)
_this.setData({
time: _time,
disabled: true,
originTitle: _this.data.title,
title: this.properties.t_title
})
}
},
ready: function () {
// 如果传时间的话在刚触发组件时就开始倒计时
let _this = this
if (_this.data.times) {
let down = function (done) {
let time = _this.data.time
if (time <= 0) {
clearInterval(timer)
return done()
}
time = time - 1
_this.setData({
time: time
})
}
let done = function () {
_this.setData({
disabled: false,
title: _this.data.originTitle
})
}
let timer = null
clearInterval(timer)
timer = setInterval(down, 1000, done)
}
if(_this.data._login){
_this.userAuthorized()
}
}
},
methods: {
// 普通点击按钮触发事件，页面响应此事件后可以进行下一步操作了
handleTap: function () {
if (this.data.disabled) return false;
this.triggerEvent('click')
},
// 用户授权
bindgetuserinfo({
detail = {}
} = {}) {
this.triggerEvent('getuserinfo', detail);
},
bindcontact({
detail = {}
} = {}) {
this.triggerEvent('contact', detail);
},
bindgetphonenumber({
detail = {}
} = {}) {
this.triggerEvent('getphonenumber', detail);
},
binderror({
detail = {}
} = {}) {
this.triggerEvent('error', detail);
}
}
})
\ No newline at end of file
components/ybutton/ybutton.json 0 → 100644
浏览文件 @ 56fbfe2a
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
components/ybutton/ybutton.wxml 0 → 100644
浏览文件 @ 56fbfe2a
<button class="geek-btn {{inline ? 'geek-btn-inline' : ''}} geek-btn-{{shape}}_{{type}} {{long ? 'geek-btn-long' : ''}} {{bottom ? 'geek-btn-bottom' : ''}} {{disabled ? 'geek-btn-disabled' : ''}}"
hover-class="geek-btn-hover"
plain="true"
loading="{{loading}}"
disabled="{{disabled}}"
bindtap="handleTap"
binderrror="binderror"
bindcontact="bindcontact"
bindgetuserinfo="bindgetuserinfo"
bindgetphonenumber="bindgetphonenumber"
open-type="{{ openType }}"
app-parameter="{{ appParameter }}"
hover-stop-propagation="{{ hoverStopPropagation }}"
hover-start-time="{{ hoverStartTime }}"
hover-stay-time="{{ hoverStayTime }}"
session-from="{{ sessionFrom }}"
send-message-title="{{ sendMessageTitle }}"
send-message-path="{{ sendMessagePath }}"
send-message-img="{{ sendMessageImg }}"
show-message-card="{{ showMessageCard }}"
>
<image wx:if="{{icon}}" class="geek-btn-icon" src="{{icon}}" mode="aspectFit"></image>{{title}} <text wx:if="{{time>0}}">{{'('+time+'s)'}}</text>
</button>
\ No newline at end of file
components/ybutton/ybutton.wxss 0 → 100644
浏览文件 @ 56fbfe2a
.geek-btn {
width: 90% !important;
padding: 10px;
margin: 5px auto;
box-sizing: border-box;
font-weight: normal;
font-size: 18px;
text-align: center;
vertical-align: middle;
border-radius: 4px;
background-color: inherit;
border: none !important;
box-shadow: none;
white-space: nowrap;
}
.geek-btn-hover {
opacity: .9;
}
.geek-btn-inline {
display: inline-block;
width: 160px !important;
height: 40px !important;
line-height: 20px;
font-size: 16px;
}
.geek-btn-long {
width: 100% !important;
margin: 10px 0;
border: none;
border-radius: 0;
}
.geek-btn-bottom {
width: 100% !important;
margin: 0;
position: fixed;
bottom: 0;
border-radius: 0;
}
.geek-btn-normal_default {
color: #4a4a4a !important;
background-color: #F8F8F8 !important;
}
.geek-btn-normal_error {
color: #fff !important;
background-color: #ff4444 !important;
}
.geek-btn-normal_warning {
color: #ffffff !important;
background-color: #F5A623 !important;
}
.geek-btn-normal_info {
color: #ffffff !important;
background-color: #3F8EFF !important;
}
.geek-btn-normal_success {
color: #ffffff !important;
background-color: #09BB07 !important;
}
.geek-btn-border_default {
border: 1px solid rgba(5, 5, 5, 0.1) !important;
color: #4a4a4a !important;
}
.geek-btn-border_error {
border: 1px solid #ff4444 !important;
color: #ff4444 !important;
}
.geek-btn-border_warning {
border: 1px solid #F5A623 !important;
color: #F5A623 !important;
}
.geek-btn-border_info {
border: 1px solid #3F8EFF !important;
color: #3F8EFF !important;
}
.geek-btn-border_success {
border: 1px solid #09BB07 !important;
color: #09BB07 !important;
}
.geek-btn-disabled {
color: #4a4a4a !important;
background-color: #d8d8d8 !important;
}
.geek-btn-icon {
position: relative;
top: -1px;
padding: 0 4px;
width: 18px;
height: 18px;
vertical-align: middle;
}
\ No newline at end of file
components/ycard/ycard.js 0 → 100644
浏览文件 @ 56fbfe2a
// components/ycard/ycard.js
Component({
/**
* 组件的属性列表
*/
properties: {
blog:{
type:Object,
value:{
avatarUrl:'',
createTime:'',
nickName:'',
content:'',
img:[]
}
},
txtIndent:{
type:Number,
value:0
},
ani:{
type:String,
value:''
}
},
// 监听器
observers: {
['blog.createTime'](val) {
if (val) {
let k=1
for(let i in val){
if(isNaN(val[i])){
k=0
break
}
}
val=k?(+val):val
this.setData({
_createTime: this.formatTime(new Date(val))
})
}
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
onPreviewImage(event) {
const ds = event.target.dataset
wx.previewImage({
urls: ds.imgs,
current: ds.imgsrc,
})
},
formatTime(date){
let fmt = 'yyyy-MM-dd hh:mm:ss'
const o = {
'M+': date.getMonth() + 1, // 月份
'd+': date.getDate(), // 日
'h+': date.getHours(), // 小时
'm+': date.getMinutes(), // 分钟
's+': date.getSeconds(), // 秒
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, date.getFullYear())
}
for (let k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, o[k].toString().length == 1 ? '0' + o[k] : o[k])
}
}
return fmt
}
}
})
components/ycard/ycard.json 0 → 100644
浏览文件 @ 56fbfe2a
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
components/ycard/ycard.wxml 0 → 100644
浏览文件 @ 56fbfe2a
<view class="blog {{ani?'blog_ani':''}}">
<view class="blog-title">
<image class="blog-portrait" src="{{blog.avatarUrl?blog.avatarUrl:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAAbCAYAAAAkoDzBAAACqUlEQVRYhe1X7W3bMBB9KTqECE8hFHF3sAGzU4TqFKanqOgtJCDeITIC7mDAkbZo70hZ/hJptwkQoNL7k0Q6kvfe3T0xD78JGCC+fHYCn4WR+NAwEh8aRuJDw9fbITU2SwP81Jgl7ZNnDV3WZ1FiQc/mAnatkL/e2PJbBvOUHk+g/QyUW8+wa416cTzvCjaHfpMu3uVSTaFXM4jbZDo8hC8wTFijaC6fp5CLBtVJomFci9Yb1WxQLAtY2jszGXCDeCdMnUPl9vzlhaghRCouMFtpgBISK4na/czAW7LKRamhypPwRAZUTyAipLlDXh4NEZ6534vnGjKWMYu0n5LsG+gctM7A07TI1Qu+30GaEW91W1DFSVHVqqqUU5RqArkyVBGu6FGQv0eN5FGiyRWUE85A87HryIrXCphK2F85eNhyzuk05fbvNCMxI0nFiafUNsYn2BGk+VJbCdNTxb7Zd7hIjnHwBJEK6EO17YySrVHvQwlZ6jTaf5GcdCOL3lbbnHRklNi/zPidM+TzPJrQ/Qh3kTNBKjim7C8IeJDHrYpHiHfZk5o5bPC9N6TrM47GJsp2ji+Cgh3SBx6xCcdWVE119QU5dJBDQ12TiKjL3/E5Q8S4fHV6wf4w8SMREk3MqYLzi4dkXnq5g+wVMyWxuOSNq/buh4FZcHyBujRkdwmNgj/tfTPeJVNAq9DUpM7szsA+4Bw3cDKTK2m2L0em8SRA1WLTCidPX4oJUBxM0WhYbntye5lYJ0iMNOPDK+7bNwm0/yFoB0xO3raEazc2plvHrcwC9gmQPlG1Wx/SqoLMJMSWP8HGr9vGvehDZ9zNHHoOtNcXDSYj39oZDwrL8OSqqe5uanzLk3tN8y3oMnVs77M5v4E7iP+fGOw/KSPxoWEkPjSMxIeGP97hehVGfTjGAAAAAElFTkSuQmCC'}}"></image>
<view class="blog-box">
<view class="blog-nickName">{{blog.nickName}}</view>
<view class="blog-time">{{_createTime}}</view>
</view>
</view>
<view class="blog-content {{txtIndent===1?'blog_indent':''}}">{{blog.content}}</view>
<view class="blog-img" wx:if="{{blog.img && blog.img.length!==0}}">
<block wx:for="{{blog.img}}" wx:key="{{index}}">
<image class="img" src="{{item}}" mode="aspectFill" bind:tap="onPreviewImage" data-imgsrc="{{item}}" data-imgs="{{blog.img}}"></image>
</block>
</view>
</view>
components/ycard/ycard.wxss 0 → 100644
浏览文件 @ 56fbfe2a
page {
background-color: #f1f1f1;
}
.blog {
padding: 20rpx;
background-color: #fff;
}
.blog-title {
display: flex;
align-items: center;
}
.blog-portrait {
width: 64rpx;
height: 64rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.blog-box {
flex: 1;
}
.blog-time {
font-size: 24rpx;
color: #939393;
}
.blog-content {
margin: 20rpx 0;
font-size: 32rpx;
font-weight: 400;
line-height: 1.5;
}
.blog_indent{
text-indent: 64rpx;
}
.blog-img {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}
.blog-img .img {
width: 230rpx;
height: 230rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
}
.blog-img .img:nth-child(3n) {
margin-right: 0;
}
.blog-nickName {
font-size: 32rpx;
}
components/ysearch/iconfont.wxss 0 → 100644
浏览文件 @ 56fbfe2a
@font-face {font-family: "iconfont";
src: url('//at.alicdn.com/t/font_1852034_95ke1ztzln5.eot?t=1590903664719'); /* IE9 */
src: url('//at.alicdn.com/t/font_1852034_95ke1ztzln5.eot?t=1590903664719#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAUwAAsAAAAACmwAAAThAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDVgqHPIYJATYCJAMcCxAABCAFhG0HZRveCBFVpCeQ/TywHdEvIQ2keVPUU11mOoG00JGUfQ/+68d+577dJ9+0oRLFNDGkSGlEWqR0puOh88N72gtGpR3ATwhJB0AHujrY93+Z1woeyABtw9PqJfFfZnb7/HrleYxDFMAELDx8O9+vf3EUUsRRtPPdZD6yqU3288dSLxMs37Wdy/8XldZti6INNx7QgCLaKmygG8h0YrylPIMJBxbOOv54OQSqRsEAkOnsGQj8nLILu3ZyYjTw1wJ8RCjFnXoOTdADPEppRi8C8BJ/Xj+YIfxAECuoXR8SnOLA9hm8QbGq/1WEeQIYbxcDVkeBgWUAHDp7E8+A5dIyYKqHv8HdAFBXBP4hzzSf2b0ofIP+/2/0ATWLqkhdUycg3Owfnksi1IAcdaQ+lRM+wGoR8IFoYfjQtNN22qEWjq9CLRL+0BEigOwPaYI2gAaAblCu5XgGZ4wTdWEFcSE5YbSJmM8kTEv9B1qkffuqZPz6W2kBg9VZgX39NMbgIOE/0Jdd1Sco2jKA8FQPConZiM4dpOPDhzTFFo/I81hGSQmJdmIuIa4u8iqTnOXwO7mwmfnUym4Nzi2K3RbIrCFZDxlD47rkvlaLI9UxzDaKXcvgtJOsmlLmk0DWU5LznMF+VsQ2KuEq6rinCGr/RRV0+pwF40h1at+SNNq/3LpKwwZWGExmIItFcjgMNruIbRRjXsRkRky4Y2juBRaJM5nuOWjVwZOH5XhGj7Qeki3deVEBJXIIxdOQZvHKsPtliLRT5tLQ8UutR5T5Jg5bXP/9Ll6SukNJUPEWEvGX4iVdNqR86U3VvpI1FvHvqB2ou8BFwcdWIPBY8C7YRZMtUvixELn1+Cgp5HLxwbF3lGSCv3+CJHUDQ3p3+NBB6rULu9+1zo2NzbW+6yrcrjuQlJ0tcSXbp4ggElNL8qyL8/KKrfNKUhMJosiH+IO6bOUgZSTYaSUhSsAIohIEzHkVGMequDwqKjxcjTx2lrJPpPfKaZyfH0fracZo4dW0ZFayDh7FIb6304bTftBkeFVCREFEQoH7kj9s4i9f4psaIXaWsk8Io09jHA6G1mnGaOEFujqXrgY/nom6e4abY7bzBgWrZ+WriaqMftyn/E5sxXZFDLZ25JiI4cHnjg+eyq6+Zv+Fez4xKEybLmIiQtcOC9IwO8/90j11rTr71PHBc8G4mOv/3MD/wwAA/B+xk5htFE/ZQyza+8CyTQnF22wS8610ONjxL/0dXivHP0aKWX7l3+IA8P4zLgtH/qsc7GLzV3MiNv4njcIZfjSrYM79+NYgTGYXFcPtbFU9D/6Lma4/cg3EnSDFoIQgGwFTTBOdugxRzQokxT5ULbkcXdPjTCkrwKIvAGn7hqDpDUzbD9GpvxAN/UPSDgyqHmN3yprZSN4cHIqAGuQbasUDmXDYpO4rlrETrmqOok90vs5CnmTN6gUHdLfYwz/KIgQCctzDGa6GXcdgHDeoQlKFYPZpSn1PlCjuRxvHHCQESAPSG6gpbEB+6WDT+v4rVIo6ghsZ86D7CTlevXKQS2QC4sUxiMZ8lbW9h1IhCIi3Ig7rgTPGUKdLDJj+jRpICRLVjIKxl9JcJHUkj3f17/MyoErdS44gkysqKavgS8i49Bx9FXkhmcRQVtFC1eCgt77yvuvQxnH9qkX2j0YAAAA=') format('woff2'),
url('//at.alicdn.com/t/font_1852034_95ke1ztzln5.woff?t=1590903664719') format('woff'),
url('//at.alicdn.com/t/font_1852034_95ke1ztzln5.ttf?t=1590903664719') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_1852034_95ke1ztzln5.svg?t=1590903664719#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-soushuo:before {
content: "\e600";
}
components/ysearch/search.js 0 → 100644
浏览文件 @ 56fbfe2a
// components/search/search.js
let keyword=''
Component({
/**
* 组件的属性列表
*/
properties: {
y_placeholder:{
type:String,
value:'请输入查询关键字'
},
y_button:{
type:String,
value:'false'
},
but_title:{
type:String,
value:'搜索'
},
y_bgcolor_bar:{
type:String,
value:'#f5f5f5'
},
y_bgcolor_but:{
type:String,
value:'#d43c33'
},
y_color:{
type:String,
value:'black'
},
y_center:{
type:String,
value:'true'
},
y_vshow:{
type:Number,
value:1
}
},
/**
* 组件的初始数据
*/
data: {
y_value:'',
icon_center:true, //图标居中控制
text_center:true //文字居中控制
},
/**
* 组件的方法列表
*/
methods: {
onInput(event){
keyword=event.detail.value
if(this.properties.button=="false"){
this.triggerEvent('search',{
keyword
})
}
},
onSearch(){
this.triggerEvent('mousetap',{
keyword:this.data.y_value
})
if(this.properties.y_vshow){
this.setData({
y_value:''
})
}
},
onFucus(){
this.setData({
icon_center:false
})
setTimeout(()=>{
this.setData({
text_center:false
})
},350)
}
}
})
components/ysearch/search.json 0 → 100644
浏览文件 @ 56fbfe2a
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
components/ysearch/search.wxml 0 → 100644
浏览文件 @ 56fbfe2a
<view class="container">
<i class="iconfont icon-soushuo find {{(y_center==='true' && icon_center)?'bar_center_icon':''}}"></i>
<input class="bar {{(y_center==='true' && text_center)?'bar_center':''}}" placeholder="{{y_placeholder}}" placeholder-class="in-bar" style="background-color:{{y_bgcolor_bar}};color:{{y_color}}" model:value="{{y_value}}" bindfocus="onFucus" bindinput="onInput"></input>
<button wx:if="{{y_button==='true'}}" class="search" style="background-color:{{y_bgcolor_but}}" bindtap="onSearch">{{but_title}}</button>
</view>
\ No newline at end of file
components/ysearch/search.wxss 0 → 100644
浏览文件 @ 56fbfe2a
@import "iconfont.wxss";
.container {
display: flex;
align-items: center;
position: relative;
box-sizing: border-box;
padding: 0 9rpx 0 14rpx;
}
.bar {
flex: 1.5;
height: 68rpx;
font-size: 30rpx;
border-radius: 50px;
background-color: #f5f5f5;
padding-left: 60rpx;
padding-right: 19rpx;
margin-right: 6rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 68rpx;
}
.bar_center{
text-align: center;
}
.search {
background: #d43c33;
color: #fff;
font-size: 27rpx;
flex: 0.2;
padding: 14rpx;
letter-spacing: 4rpx;
border-radius: 13px;
}
.in-bar {
color: #999;
}
.find {
position: absolute;
top: 50%;
transform: translate(16rpx, -50%);
color: #9f9f9f;
transition: all .6s ease;
}
.bar_center_icon{
transform: translate(170rpx,-50%);
}
\ No newline at end of file
pages/RainSnow/rainsnow.js 0 → 100644
浏览文件 @ 56fbfe2a
import {Particle,Snow} from '../../utils/effect'
let Rain=Particle
let rain=null
let rains=null
Page({
/**
* 页面的初始数据
*/
data: {
shown:true
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.getSystemInfo({
success: (res) => {
let width = res.windowWidth
this.setData({
width,
scale: width / 375
})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
const ctx = wx.createCanvasContext('effect')
const ctxx = wx.createCanvasContext('effects')
let {width, scale} = this.data
// 768 为 CSS 中设置的 rpx 值
let height = 768 / 2 * scale
// 下雨
rains = new Rain(ctxx, width, height, {
amount: 100,
speedFactor: 0.03
})
// 下雪
rain=new Snow(ctx, width, height, {
amount: 100,
speedFactor: 0.03
})
// 跑起来
rains.run()
rain.run()
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
rain.clear()
rains.clear()
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
pages/RainSnow/rainsnow.json 0 → 100644
浏览文件 @ 56fbfe2a
{
"usingComponents": {}
}
\ No newline at end of file
pages/RainSnow/rainsnow.wxml 0 → 100644
浏览文件 @ 56fbfe2a
<canvas canvas-id="effect" id="effects"></canvas>
<canvas canvas-id="effects" id="effect"></canvas>
\ No newline at end of file
pages/RainSnow/rainsnow.wxss 0 → 100644
浏览文件 @ 56fbfe2a
Page{
background-color: white;
}
#effects{
width: 750rpx;
height: 768rpx;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#effect{
width: 750rpx;
height: 768rpx;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
\ No newline at end of file
pages/alphabet/alphabet.js
浏览文件 @ 56fbfe2a
......@@ -8,32 +8,32 @@ Page({
list:[
{alphabet:'Top',datas:['a','a1']},
{alphabet:'A',datas:['a','a1']},
{alphabet:'B',datas:['a','a1','a2']},
{alphabet:'C',datas:['a','a1','a2']},
{alphabet:'D',datas:['a','a1','a2']},
{alphabet:'E',datas:['a','a1','a2']},
{alphabet:'F',datas:['a','a1','a2']},
{alphabet:'G',datas:['a','a1','a2']},
{alphabet:'H',datas:['a','a1','a2']},
{alphabet:'I',datas:['a','a1','a2']},
{alphabet:'J',datas:['a','a1','a2']},
{alphabet:'K',datas:['a','a1','a2']},
{alphabet:'L',datas:['a','a1','a2']},
{alphabet:'M',datas:['a','a1','a2']},
{alphabet:'N',datas:['a','a1','a2']},
{alphabet:'O',datas:['a','a1','a2']},
{alphabet:'P',datas:['a','a1','a2']},
{alphabet:'Q',datas:['a','a1','a2']},
{alphabet:'R',datas:['a','a1','a2']},
{alphabet:'S',datas:['a','a1','a2']},
{alphabet:'T',datas:['a','a1','a2']},
{alphabet:'U',datas:['a','a1','a2']},
{alphabet:'V',datas:['a','a1','a2']},
{alphabet:'W',datas:['a','a1','a2']},
{alphabet:'X',datas:['a','a1','a2']},
{alphabet:'Y',datas:['a','a1','a2']},
{alphabet:'Z',datas:['a','a1','a2']}
],
{alphabet:'B',datas:['b','b1','b2']},
{alphabet:'C',datas:['c','c1','c2']},
{alphabet:'D',datas:['d','d1','d2']},
{alphabet:'E',datas:['e','e1','e2']},
{alphabet:'F',datas:['f','f1','f2']},
{alphabet:'G',datas:['g','g1','g2']},
{alphabet:'H',datas:['h','h1','h2']},
{alphabet:'I',datas:['i','i1','i2']},
{alphabet:'J',datas:['j','j1','j2']},
{alphabet:'K',datas:['k','k1','k2']},
{alphabet:'L',datas:['l','l1','l2']},
{alphabet:'M',datas:['m','m1','m2']},
{alphabet:'N',datas:['n','n1','n2']},
{alphabet:'O',datas:['o','o1','o2']},
{alphabet:'P',datas:['p','p1','p2']},
{alphabet:'Q',datas:['q','q1','q2']},
{alphabet:'R',datas:['r','r1','r2']},
{alphabet:'S',datas:['s','a1','a2']},
{alphabet:'T',datas:['t','t1','t2']},
{alphabet:'U',datas:['u','u1','u2']},
{alphabet:'V',datas:['v','v1','v2']},
{alphabet:'W',datas:['w','w1','w2']},
{alphabet:'X',datas:['a','x1','x2']},
{alphabet:'Y',datas:['b','y1','y2']},
{alphabet:'Z',datas:['c','z1','z2']}
]
},
......
pages/alphabet/alphabet.json
浏览文件 @ 56fbfe2a
{
"navigationBarTitleText": "自定义侧边栏字母导航组件",
"usingComponents": {
"y-alphabet":"../../components/alphabet/alphabet"
}
......
pages/calendar/calendar.js
浏览文件 @ 56fbfe2a
......@@ -5,13 +5,30 @@ Page({
* 页面的初始数据
*/
data: {
dateTimes:[{day:'10-1',target:'国庆节'},{day:'10-2',target:'中秋节'},{day:'2020-10-24',target:'程序员节'}],
selected:false
dateTimes:[{day:'10-1',target:'国庆节'},{day:'10-2',target:'中秋节'},{day:'2020-10-24',target:'程序员节'},{day:'2021-5-1',target:'劳动节'}],
selected:false,
now_date:'',
now_week:'',
emotions: {
'开心':'serene',
'平静':'hehe',
'难过':'sad'
}, // 开心、平静、伤心、难过....设置一个值，这个值是下面colors里面的映射名。比如用户选择“开心”，你传的是“serene”和当前日期之类的
colors: {
serene: '#64d9fe',
hehe: '#d3fc1e',
ecstatic: '#f7dc0e',
sad: '#ec238a',
terrified: '#ee1aea'
},
DateColor:[] // 心情签到用
},
selected(){
this.setData({
selected:!this.data.selected
selected:!this.data.selected,
now_date:this.selectedDate,
now_week:this.selectedWeek
})
},
......@@ -19,63 +36,49 @@ Page({
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 每次填写完心情要保存到本地，在进入页面时就拿到并填充到data中
let dColor=wx.getStorageSync('DateColor')
if(dColor){
this.setData({
DateColor:dColor
})
}
},
// 心情签到-模拟改变传值
signIn(){
// 这里用‘hehe’，你可以看做“用户签到时输入平静”然后在emotions关联表中发现开心对应的是hehe！
let bgColor={day:'2021-5-8',serene:'hehe'};
let dcolor=this.data.DateColor;
dcolor.push(bgColor);
wx.setStorage({
key:'DateColor',
data:dcolor,
success:()=>{
wx.showToast({
title: '成功',
})
this.setData({
DateColor:dcolor
})
}
})
},
timeload(e){
console.log(e.detail)
// 保存到变量中，在刚打开组件时显示到页面上初始值
this.selectedDate=e.detail.selectedDate
this.selectedWeek=e.detail.selectedWeek
},
timechanged(e){
console.log(e.detail)
this.setData({
now_date:e.detail.selectedDate,
now_week:e.detail.selectedWeek
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
pages/calendar/calendar.json
浏览文件 @ 56fbfe2a
{
"navigationBarTitleText": "自定义日历组件",
"usingComponents": {
"y-calendar":"../../components/calendar/calendar"
}
......
pages/calendar/calendar.wxml
浏览文件 @ 56fbfe2a
<view>第一种使用方式：直接选择(这种可用于外面嵌套一个view然后改变大小后用position做一个悬浮)</view>
<view>
<view class="select" bindtap="selected">选择时间</view>
<y-calendar wx:if="{{selected}}" before_show="0" task_show="1" dateTimes="{{dateTimes}}" bind:timeload="timeload" bind:timechanged="timechanged"></y-calendar>
<y-calendar before_show="1" task_show="0" yDateTimes="{{dateTimes}}" yEmotions="{{colors}}" yDayColor="{{DateColor}}" bind:timeload="timeload"
bind:timechanged="timechanged"></y-calendar>
</view>
<button type="primary" bindtap="signIn">心情签到</button>
<!-- <view>
<y-calendar before_show="1" task_show="0" dateTimes="{{dateTimes}}" bind:timeload="timeload" bind:timechanged="timechanged"></y-calendar>
</view> -->
\ No newline at end of file
<view style="margin-top:30rpx;margin-bottom:20rpx;border-top:1rpx solid rgba(0,0,0,.15)">第二种使用方式：弹出式(请点击下面那个按钮)</view>
<view class="basic_box">
<view class="departments location" bindtap="selected">
<view class="depart_title">选择日期</view>
<view wx:if="{{now_date&&now_week}}" class="placeholder depart_content">{{now_date}} {{now_week}}
</view>
<view class="placeholder depart_content befselect" wx:else>请选择日期</view>
<view class="desc">如有变动请修改后再次提交</view>
</view>
</view>
<!-- 引用自定义组件calendar -->
<y-calendar wx:if="{{selected}}" before_show="0" task_show="1" dateTimes="{{dateTimes}}" bind:timeload="timeload"
bind:timechanged="timechanged"></y-calendar>
\ No newline at end of file
pages/calendar/calendar.wxss
浏览文件 @ 56fbfe2a
/* pages/detail/detail.wxss */
\ No newline at end of file
.select{
display: inline-block;
margin: 20rpx;
border: 1rpx solid rgba(0,0,0,.2);
padding: 6rpx 10rpx;
}
.basic_box{
width: 100%;
border-top: 1rpx solid rgba(0,0,0,.08);
border-bottom: 1rpx solid rgba(0,0,0,.08);
box-sizing: border-box;
padding: 0 0 0 26rpx;
}
.basic_box .departments{
width: 100%;
height: 96rpx;
display: flex;
align-items: center;
font-size: 36rpx;
font-weight: 347;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.basic_box .departments:nth-child(2){
border-top: 1rpx solid rgba(0,0,0,.08);
border-bottom: 1rpx solid rgba(0,0,0,.08);
}
.basic_box .location{
position: relative;
border-bottom: 1rpx solid rgba(0,0,0,.009);
display: flex;
align-items: flex-start;
padding-top: 20rpx;
}
.basic_box .desc{
position: absolute;
right: 19rpx;
bottom: 4rpx;
color: rgb(63,142,255);
font-size: 23rpx;
}
.departments .depart_title{
width: 20%;
}
.departments .depart_content{
margin-left: 10%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.departments .placeholder{
width: 69%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.departments .befselect{
color: rgba(0,0,0,.6);
}
\ No newline at end of file
pages/card/card.js 0 → 100644
浏览文件 @ 56fbfe2a
// pages/card/card.js
Page({
/**
* 页面的初始数据
*/
data: {
txtIndent:1,
blog:{
avatarUrl:'',
// createTime:'2020-09-06 00:00:00',
createTime:'1604639210646',
nickName:'云小梦',
content:'唉胡反思uagaiufagsi功夫爱啊功夫噶 就业啊功夫啊啊功夫压根改革法uaoiau和光伏业按规范 ',
img:['https://img-blog.csdnimg.cn/20200716101914321.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjI0ODc4,size_16,color_FFFFFF,t_70']
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
pages/card/card.json 0 → 100644
浏览文件 @ 56fbfe2a
{
"navigationBarTitleText": "自定义card卡片组件",
"usingComponents": {
"y-card":"/components/ycard/ycard"
}
}
\ No newline at end of file
pages/card/card.wxml 0 → 100644
浏览文件 @ 56fbfe2a
<y-card txtIndent="{{txtIndent}}" blog="{{blog}}" ani="ani"></y-card>
\ No newline at end of file
pages/coupon/coupon.json
浏览文件 @ 56fbfe2a
{
"navigationBarTitleText": "自定义选项卡组件",
"usingComponents": {
"y-coupon":"/components/coupon/coupon"
}
......
pages/coupon/coupon.wxml
浏览文件 @ 56fbfe2a
<y-coupon>
<image slot="l_img" src="/img/localSDK.png" mode="aspectFill"></image>
<!-- 测试图片 -->
<image slot="l_img" src="img/localSDK.png" mode="aspectFill"></image>
<text slot="l_text">今日头条</text>
<text slot="r_text">uagiuagfiuagf以按广东省覅蒛以爱的功夫撒个</text>
</y-coupon>
\ No newline at end of file
pages/index/index.js
浏览文件 @ 56fbfe2a
......@@ -5,7 +5,6 @@ Page({
* 页面的初始数据
*/
data: {
url_one:'https://codechina.csdn.net/qq_43624878/yunUI',
url_two:'https://github.com/1314mxc/yunUI'
},
......@@ -33,9 +32,36 @@ Page({
})
},
clipone(){
this.setclip(this.data.url_one)
modelshow(){
wx.navigateTo({
url: '../tdetail/tdetail',
})
},
searchshow(){
wx.navigateTo({
url: '../search/search',
})
},
cardshow(){
wx.navigateTo({
url: '../card/card',
})
},
effectshow(){
wx.navigateTo({
url: '../RainSnow/rainsnow',
})
},
butshow(){
wx.navigateTo({
url: '../ybutton/ybutton',
})
},
cliptwo(){
this.setclip(this.data.url_two)
},
......
pages/index/index.wxml
浏览文件 @ 56fbfe2a
......@@ -10,6 +10,24 @@
<view class="mxc3" bindtap="alphabetshow">
<text>去康康“自定义侧边栏字母导航组件”吧！</text>
</view>
<view class="mxc4" bindtap="modelshow">
<text>去康康“自定义弹出框yModel组件”吧！</text>
</view>
<view class="mxc5" bindtap="searchshow">
<text>去康康“自定义搜索栏ysearch组件”吧！</text>
</view>
<view class="mxc6" bindtap="cardshow">
<text>去康康“自定义卡片ycard组件”吧！</text>
</view>
<view class="mxc7" bindtap="effectshow">
<text>去康康“自定义雨雪系统RainSnow组件”吧！</text>
</view>
<view class="mxc8" bindtap="butshow">
<text>去康康“自定义按钮button组件”吧！</text>
</view>
<!-- 处理对其问题 -->
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
<view class="loaded">
<view class="typing">更多内容，敬请期待 ...</view>
......@@ -17,10 +35,7 @@
<view class="navigator">
<text>项目开源地址：</text>
<text class="url" bindlongtap="clipone">{{url_one}}</text>
<text>或：</text>
<text class="url" bindlongtap="cliptwo">{{url_two}}</text>
<text>在其中你可以看到详细代码及注释以及使用方式（本小程序版本只展示其中一种应用方式）</text>
<text>在其中你可以看到详细代码及注释以及使用方式（本小程序版本只展示其中一种或几种应用方式）\n\n有任何疑问欢迎提issue！</text>
</view>
\ No newline at end of file
pages/index/index.wxss
浏览文件 @ 56fbfe2a
......@@ -5,18 +5,26 @@ Page{
flex-wrap: wrap;
justify-content: space-around;
overflow-y: auto;
background-color: white;
}
view{
width: 46%;
height: 489rpx;
background-color: rgba(0,0,0,.1);
height: 469rpx;
border-radius: 7px;
background-color: rgba(0,0,0,.09);
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
margin-top: 26rpx;
margin-bottom: 24rpx;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
box-sizing: border-box;
padding: 0 17rpx;
}
i{
width: 46%;
}
.loaded{
......@@ -53,9 +61,9 @@ view{
.navigator{
width: 96%;
height: 500rpx;
height: 400rpx;
margin: 20rpx auto;
background-color: rgba(0,0,0,.1);
background-color: rgba(0,0,0,.09);
display: flex;
flex-wrap: wrap;
flex-direction: column;
......
pages/notices/notices.json
浏览文件 @ 56fbfe2a
{
"navigationBarTitleText": "通知",
"navigationBarTitleText": "自定义日期组件",
"usingComponents": {
"y-picker":"../../components/yPicker/ypicker"
}
......
pages/notices/notices.wxml
浏览文件 @ 56fbfe2a
<form bindsubmit="register">
<view class="n_top">
<view class="list" wx:if="{{swItch!=0}}">
<view class="left">通知时间</view>
<view class="left">通知时间（s）</view>
<view class="l_right">
<y-picker open="true" size="right" color="#888888" seo="1" defaulttext="请选择时间" bind:bindMultiPickerChange="bindMultiPickerChange"></y-picker>
<i class="iconfont icon-fanhui-copy-copy"></i>
</view>
</view>
</view>
<view class="n_top">
<view class="list" wx:if="{{swItch!=0}}">
<view class="left">通知时间（精确到分）</view>
<view class="l_right">
<y-picker open="true" size="right" color="#888888" seo="0" defaulttext="请选择时间" bind:bindMultiPickerChange="bindMultiPickerChange"></y-picker>
<i class="iconfont icon-fanhui-copy-copy"></i>
</view>
</view>
</view>
</form>
pages/search/search.js 0 → 100644
浏览文件 @ 56fbfe2a
// pages/search/search.js
Page({
/**
* 页面的初始数据
*/
data: {
},
Onsearch(e){
console.log(e.detail.keyword)
},
Insearch(e){
console.log(e.detail.keyword)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
pages/search/search.json 0 → 100644
浏览文件 @ 56fbfe2a
{
"navigationBarTitleText": "自定义搜索栏组件",
"usingComponents": {
"y-search":"/components/ysearch/search"
}
}
\ No newline at end of file
pages/search/search.wxml 0 → 100644
浏览文件 @ 56fbfe2a
<view>
<y-search y_button="true" y_center="true" bind:search="Onsearch" bind:mousetap="Insearch" />
</view>
<view>
<y-search y_button="false" y_center="true" bind:search="Onsearch" bind:mousetap="Insearch" />
</view>
<view>
<y-search y_button="true" y_center="false" bind:search="Onsearch" bind:mousetap="Insearch" />
</view>
\ No newline at end of file
pages/search/search.wxss 0 → 100644
浏览文件 @ 56fbfe2a
view{
margin-top: 100rpx;
}
\ No newline at end of file
pages/tdetail/tdetail.js
浏览文件 @ 56fbfe2a
......@@ -5,7 +5,77 @@ Page({
* 页面的初始数据
*/
data: {
show:false,
showed:false, //第二个展示用弹窗控制变量
center:1,
md:'60%'
},
showone(){
this.setData({
show:true,
fail:'取消',
suc:'确定',
title:'提示',
md:'60%'
})
},
showtwo(){
this.setData({
show:true,
center:0, //注意：这里只是为了减少展示wxml的代码，真实使用中不传此参数即可达到效果
fail:'取消',
suc:'确定',
title:'提示',
md:'60%'
})
},
showthr(){
this.setData({
show:true,
center:1,
title:'我是云小梦', //注意：这里只是为了减少展示wxml的代码，真实使用中不传此参数即可达到效果
fail:'取消',
suc:'确定',
md:'60%'
})
},
showfou(){
this.setData({
show:true,
center:1,
title:'提示',
fail:'我知道了', //注意：这里只是为了减少展示wxml的代码，真实使用中不传此参数即可达到效果
suc:'OK', //注意：这里只是为了减少展示wxml的代码，真实使用中不传此参数即可达到效果
md:'60%'
})
},
showfiv(){
this.setData({
md:'86%',
show:true,
center:1,
title:'提示',
fail:'我知道了', //注意：这里只是为了减少展示wxml的代码，真实使用中不传此参数即可达到效果
suc:'OK', //注意：这里只是为了减少展示wxml的代码，真实使用中不传此参数即可达到效果
})
},
showsix(){
this.setData({
showed:true,
})
},
modelClosed(e){
console.log(e.detail)
if(e.detail){
this.setData({
show:false,
showed:false //这里只是为了展示，事实上：这两个变量都是控制显示与否的!
})
}
},
modelcomplete(e){
console.log(e.detail)
},
/**
......
pages/tdetail/tdetail.json
浏览文件 @ 56fbfe2a
{
"usingComponents": {}
"navigationBarTitleText": "自定义model弹出窗组件",
"usingComponents": {
"y-model":"/components/yModel/ymodel"
}
}
\ No newline at end of file
pages/tdetail/tdetail.wxml
浏览文件 @ 56fbfe2a
<!--pages/tdetail/tdetail.wxml-->
<text>pages/tdetail/tdetail.wxml</text>
<view id="button" bindtap="showone">居中式多行弹窗</view>
<view id="button" bindtap="showtwo">普通多行弹窗</view>
<view id="button" bindtap="showsix">普通单行弹窗</view>
<view id="button" bindtap="showthr">标题自定义多行弹窗</view>
<view id="button" bindtap="showfou">按钮自定义多行弹窗</view>
<view id="button" bindtap="showfiv">看，我大小不一样</view>
<y-model wx:if="{{show}}" center="{{center}}" md="{{md}}" title="{{title}}" fail="{{fail}}" suc="{{suc}}" bind:modelClosed="modelClosed" bind:modelcomplete="modelcomplete">
<view>
<view>sadas</view>
<view>safafa</view>
<view>sadas</view>
<view>safafa</view>
<view>sadas</view>
</view>
</y-model>
<y-model wx:if="{{showed}}" bind:modelClosed="modelClosed" bind:modelcomplete="modelcomplete">
<view>
<view>sadasdadads</view>
</view>
</y-model>
\ No newline at end of file
pages/tdetail/tdetail.wxss
浏览文件 @ 56fbfe2a
/* pages/tdetail/tdetail.wxss */
\ No newline at end of file
#button{
position: relative;
top: 40rpx;
left: 0;
margin: 40rpx auto;
width: 60%;
height: 78rpx;
color: white;
/* margin: 0;
padding: 0; */
/*自定义边框*/
border: 0;
/*消除默认点击蓝色边框效果*/
outline: none;
-webkit-appearence: none;
background-image: linear-gradient(to right, lime, skyblue);
box-shadow: 0.1875rem 0.1875rem 0.3125rem -0.1875rem rgba(0,0,0,.3);
border-radius: 16px;
padding: 2rpx 10rpx;
animation: hue 5s linear infinite,hues 1.5s linear infinite;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes hue {
0% { filter: hue-rotate(0deg); }
50% { filter: hue-rotate(180deg); }
100% { filter: hue-rotate(360deg); }
}
@keyframes hues {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
#button:hover{
filter: brightness(130%);
animation: hue 5s linear infinite;
}
\ No newline at end of file
pages/ybutton/ybutton.js 0 → 100644
浏览文件 @ 56fbfe2a
// pages/ybutton/ybutton.js
Page({
/**
* 页面的初始数据
*/
data: {
},
bindleTap:function(e){
console.log(e)
}
})
\ No newline at end of file
pages/ybutton/ybutton.json 0 → 100644
浏览文件 @ 56fbfe2a
{
"navigationBarTitleText": "自定义button组件",
"usingComponents": {
"y-button":"/components/ybutton/ybutton"
}
}
\ No newline at end of file
pages/ybutton/ybutton.wxml 0 → 100644
浏览文件 @ 56fbfe2a
自定义倒计时时间、倒计时文字、触发按钮时文字
<y-button t_title="倒计时" times="7" title="开始决战吧" bind:click="bindleTap"></y-button>
自定义倒计时时间、触发按钮时文字
<y-button times="7" title="开始决战吧" bind:click="bindleTap"></y-button>
自定义倒计时时间
<y-button times="9" bind:click="bindleTap"></y-button>
一切按照默认值
<y-button bind:click="bindleTap"></y-button>
\ No newline at end of file
pages/ybutton/ybutton.wxss 0 → 100644
浏览文件 @ 56fbfe2a
/* pages/ybutton/ybutton.wxss */
\ No newline at end of file
project.config.json
浏览文件 @ 56fbfe2a
{
"description": "项目配置文件",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"enhance": false,
"postcss": true,
"preloadBackgroundData": false,
"minified": true,
"newFeature": false,
"coverView": true,
"nodeModules": false,
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"scopeDataCheck": false,
"uglifyFileName": false,
"checkInvalidKey": true,
"checkSiteMap": true,
"uploadWithSourceMap": true,
"compileHotReLoad": false,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"useIsolateContext": true,
"useCompilerModule": false,
"userConfirmedUseCompilerModuleSwitch": false
},
"compileType": "miniprogram",
"libVersion": "2.12.0",
"appid": "这里的APPID填写自己的哦！",
"projectname": "safety-and-stability-weekly-reportss",
"debugOptions": {
"hidedInDevtools": []
},
"scripts": {},
"isGameTourist": false,
"simulatorType": "wechat",
"simulatorPluginLibVersion": {},
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"current": -1,
"list": []
},
"plugin": {
"current": -1,
"list": []
},
"gamePlugin": {
"current": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
"description": "项目配置文件",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"enhance": false,
"postcss": true,
"preloadBackgroundData": false,
"minified": true,
"newFeature": false,
"coverView": true,
"nodeModules": false,
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"scopeDataCheck": false,
"uglifyFileName": false,
"checkInvalidKey": true,
"checkSiteMap": true,
"uploadWithSourceMap": true,
"compileHotReLoad": false,
"useMultiFrameRuntime": true,
"useApiHook": true,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"bundle": false,
"useIsolateContext": true,
"useCompilerModule": true,
"userConfirmedUseCompilerModuleSwitch": false,
"userConfirmedBundleSwitch": false,
"packNpmManually": false,
"packNpmRelationList": [],
"minifyWXSS": true,
"useApiHostProcess": false
},
"compileType": "miniprogram",
"libVersion": "2.12.0",
"appid": "wx0169d85391fbfe75",
"projectname": "safety-and-stability-weekly-reportss",
"debugOptions": {
"hidedInDevtools": []
},
"scripts": {},
"isGameTourist": false,
"simulatorType": "wechat",
"simulatorPluginLibVersion": {},
"condition": {
"search": {
"list": []
},
"conversation": {
"list": []
},
"game": {
"list": []
},
"plugin": {
"list": []
},
"gamePlugin": {
"list": []
},
"miniprogram": {
"list": []
}
}
}
\ No newline at end of file
utils/effect.js 0 → 100644
浏览文件 @ 56fbfe2a
const STATUS_STOP = 'stop'
const STATUS_RUNNING = 'running'
// 基类 & 下雨类
class Particle {
constructor(ctx, width, height, opts) {
this._timer = null
this._options = opts || {}
// canvas 上下文
this.ctx = ctx
this.status = STATUS_STOP
this.w = width
this.h = height
this._init()
}
_init() {
let h = this.h
let w = this.w
// 数量，根据不同雨大小，数量可调
let amount = this._options.amount || 100
// 速度参数，调节下落速度
let speedFactor = this._options.speedFactor || 0.03
let speed = speedFactor * h
let ps = (this.particles = [])
for (let i = 0; i < amount; i++) {
let p = {
x: Math.random() * w,
y: Math.random() * h,
l: 2 * Math.random(),
xs: -1,
ys: 10 * Math.random() + speed,
color: 'rgba(0, 0, 0, 0.2)'
}
ps.push(p)
}
}
_draw() {
let ps = this.particles
let ctx = this.ctx
// 清空画布
ctx.clearRect(0, 0, this.w, this.h)
// 遍历绘制雨滴
for (let i = 0; i < ps.length; i++) {
let s = ps[i]
ctx.beginPath()
ctx.moveTo(s.x, s.y)
// 画线绘制雨点效果
ctx.lineTo(s.x + s.l * s.xs, s.y + s.l * s.ys)
ctx.setStrokeStyle(s.color)
ctx.stroke()
}
ctx.draw()
return this._update()
}
_update(){
let {w, h} = this // 获取画布大小
for (let ps = this.particles, i = 0; i < ps.length; i++) {
// 开始下一个周期的位置计算
let s = ps[i]
s.x += s.xs
s.y += s.ys
// 超出范围，重新回收，重复利用
if (s.x > w || s.y > h) {
s.x = Math.random() * w
s.y = -10
}
}
}
run() {
if (this.status !== STATUS_RUNNING) {
// 更改状态
this.status = STATUS_RUNNING
// 绘制循环
this._timer = setInterval(() => {
this._draw()
}, 30)
}
return this
}
stop() {
// 清理定时器，状态修改
this.status = STATUS_STOP
clearInterval(this._timer)
return this
}
clear(){
// 结束粒子运动
this.stop()
this.ctx.clearRect(0, 0, this.w, this.h)
this.ctx.draw()
return this
}
}
// 下雪类
class Snow extends Particle {
_init() {
let {w, h} = this
let colors = this._options._colors || ['#ccc', '#eee', '#fff', '#ddd']
// 雪的大小用数量来计算
let amount = this._options.amount || 100
let speedFactor = this._options.speedFactor || 0.03
// 速度
let speed = speedFactor * h * 0.15
let radius = this._options.radius || 2
let ps = (this.particles = [])
for (let i = 0; i < amount; i++) {
let x = Math.random() * w
let y = Math.random() * h
// console.log(x, y)
ps.push({
x,
y,
// 原始 x 坐标，后面计算随机雪摆动是以此为基础
ox: x,
// 向下运动动能变量
ys: Math.random() + speed,
// 雪的半径大小
r: Math.floor(Math.random() * (radius + 0.5) + 0.5),
// 颜色随机取
color: colors[Math.floor(Math.random() * colors.length)],
rs: Math.random() * 80
})
}
}
_draw() {
let ps = this.particles
let ctx = this.ctx
ctx.clearRect(0, 0, this.w, this.h)
for (let i = 0; i < ps.length; i++) {
let {x, y, r, color} = ps[i]
ctx.beginPath()
// 绘制下雪的效果
ctx.arc(x, y, r, 0, Math.PI * 2, false)
ctx.setFillStyle(color)
ctx.fill()
ctx.closePath()
}
ctx.draw()
this._update()
}
_update() {
let {w, h} = this
let v = this._options.speedFactor / 10
for (let ps = this.particles, i = 0; i < ps.length; i++) {
let p = ps[i]
let {ox, ys} = p
p.rs += v
// 这里使用了 cos，做成随机左右摆动的效果
p.x = ox + Math.cos(p.rs) * w / 2
p.y += ys
// console.log(ys)
// 重复利用
if (p.x > w || p.y > h) {
p.x = Math.random() * w
p.y = -10
}
}
}
}
export {
Particle,
Snow
}
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或