diff --git a/README.md b/README.md index 80efe92b083e366193b2ad0f6b292ab0bbaffce0..c3f6709d822074db784b3332178cd2a52e80b3d2 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,16 @@ -# 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中按如下格式传参调用： ``` @@ -34,18 +47,29 @@ 选择时间 - + + + + sadas + + + + + + + + ``` -并传参！ + ## 参数说明 ### 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方式接收开发者传入“内容部分”，即：此组件允许子组件（子元素）的存在！而且不止一个！其格式参见上面“如何使用”中的``````，您可以通过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 +
（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) + + ## 联系作者 diff --git a/app.json b/app.json index c7d046e9d3e34a95c105820d7d98ca7621e7329c..7ecde36cc62fe5bb294fa6902093cb7a66aa044c 100644 --- a/app.json +++ b/app.json @@ -1,18 +1,22 @@ { - "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 diff --git a/components/alphabet/alphabet.js b/components/alphabet/alphabet.js index 7cafd6fdfb2bd94b3b0b2541cfce3b44593463c5..954d3c6b90d30a565f6342e48f50fea62aaf942b 100644 --- a/components/alphabet/alphabet.js +++ b/components/alphabet/alphabet.js @@ -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 diff --git a/components/alphabet/alphabet.wxml b/components/alphabet/alphabet.wxml index d12764feb0337bf7bb565becbf7ba0509e2e0732..200199414b919778840fb1a6767746090dbf59fa 100644 --- a/components/alphabet/alphabet.wxml +++ b/components/alphabet/alphabet.wxml @@ -1,5 +1,5 @@ - + @@ -18,7 +18,7 @@ - + {{item.alphabet}} \ No newline at end of file diff --git a/components/calendar/calendar.js b/components/calendar/calendar.js index 08c86b148e4bd1b41b110f9e9bd9eccdf6ea3e21..449046086165c5c8ca2c4cda754c5b419c3c2c5d 100644 --- a/components/calendar/calendar.js +++ b/components/calendar/calendar.js @@ -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; diff --git a/components/calendar/calendar.wxml b/components/calendar/calendar.wxml index 1156525a90ea854b5244a2d8ecc30383efeda0e3..0527c6c9ba9c73621d2c6d8a0853f2858170e109 100644 --- a/components/calendar/calendar.wxml +++ b/components/calendar/calendar.wxml @@ -18,11 +18,11 @@ 五 六 - - - + + {{item.date}} diff --git a/components/calendar/calendar.wxss b/components/calendar/calendar.wxss index f42d7c9b7a2c18aef7c12df6205b7544291d8aa2..11c1675e7cba3b6d98f49fe6c7dcc713bbb3268c 100644 --- a/components/calendar/calendar.wxss +++ b/components/calendar/calendar.wxss @@ -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; } diff --git a/components/yModel/ymodel.js b/components/yModel/ymodel.js new file mode 100644 index 0000000000000000000000000000000000000000..26850999b172666eba0058b0630cc2c8d574706e --- /dev/null +++ b/components/yModel/ymodel.js @@ -0,0 +1,61 @@ +// 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) + } + } +}) diff --git a/components/yModel/ymodel.json b/components/yModel/ymodel.json new file mode 100644 index 0000000000000000000000000000000000000000..e8cfaaf80c404eb97d3cf8b6277ec15f37e6905e --- /dev/null +++ b/components/yModel/ymodel.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/components/yModel/ymodel.wxml b/components/yModel/ymodel.wxml new file mode 100644 index 0000000000000000000000000000000000000000..f2d8239f8cbfc5a32182f3dc106e58c3d0038f94 --- /dev/null +++ b/components/yModel/ymodel.wxml @@ -0,0 +1,13 @@ + + + + {{title}} + + + + + {{fail}} + {{suc}} + + + \ No newline at end of file diff --git a/components/yModel/ymodel.wxss b/components/yModel/ymodel.wxss new file mode 100644 index 0000000000000000000000000000000000000000..f98da6af8629910b00360b2a41815748ec03c612 --- /dev/null +++ b/components/yModel/ymodel.wxss @@ -0,0 +1,93 @@ +.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 diff --git a/components/yPicker/ypicker.js b/components/yPicker/ypicker.js index 5744cd7ae93240220995811efec4b2fd1be24eab..4d03d7ddd742c81ac384a1f33867d252f3dae1f0 100644 --- a/components/yPicker/ypicker.js +++ b/components/yPicker/ypicker.js @@ -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); - }, } }) diff --git a/components/ybutton/ybutton.js b/components/ybutton/ybutton.js new file mode 100644 index 0000000000000000000000000000000000000000..eec8781fe21db7769b75dc840213634e576a2d99 --- /dev/null +++ b/components/ybutton/ybutton.js @@ -0,0 +1,148 @@ +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 diff --git a/components/ybutton/ybutton.json b/components/ybutton/ybutton.json new file mode 100644 index 0000000000000000000000000000000000000000..e8cfaaf80c404eb97d3cf8b6277ec15f37e6905e --- /dev/null +++ b/components/ybutton/ybutton.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/components/ybutton/ybutton.wxml b/components/ybutton/ybutton.wxml new file mode 100644 index 0000000000000000000000000000000000000000..1c5dafdd6954a877123c81b000e36e200fb3c9fe --- /dev/null +++ b/components/ybutton/ybutton.wxml @@ -0,0 +1,23 @@ + \ No newline at end of file diff --git a/components/ybutton/ybutton.wxss b/components/ybutton/ybutton.wxss new file mode 100644 index 0000000000000000000000000000000000000000..987e57aa6cc90be3d7dc5d1a109cbfa0b84b5fc1 --- /dev/null +++ b/components/ybutton/ybutton.wxss @@ -0,0 +1,106 @@ +.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 diff --git a/components/ycard/ycard.js b/components/ycard/ycard.js new file mode 100644 index 0000000000000000000000000000000000000000..4175a4aab911098543d964cd56fd8c2baae364b5 --- /dev/null +++ b/components/ycard/ycard.js @@ -0,0 +1,85 @@ +// 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 + } + } +}) diff --git a/components/ycard/ycard.json b/components/ycard/ycard.json new file mode 100644 index 0000000000000000000000000000000000000000..e8cfaaf80c404eb97d3cf8b6277ec15f37e6905e --- /dev/null +++ b/components/ycard/ycard.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/components/ycard/ycard.wxml b/components/ycard/ycard.wxml new file mode 100644 index 0000000000000000000000000000000000000000..0733f092b5b3413e6cd443dae688b78e8ca62ce0 --- /dev/null +++ b/components/ycard/ycard.wxml @@ -0,0 +1,15 @@ + + + + + {{blog.nickName}} + {{_createTime}} + + + {{blog.content}} + + + + + + diff --git a/components/ycard/ycard.wxss b/components/ycard/ycard.wxss new file mode 100644 index 0000000000000000000000000000000000000000..01653d7ce361d3f6ed206abde4e649d24579304e --- /dev/null +++ b/components/ycard/ycard.wxss @@ -0,0 +1,60 @@ +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; +} diff --git a/components/ysearch/iconfont.wxss b/components/ysearch/iconfont.wxss new file mode 100644 index 0000000000000000000000000000000000000000..fdfc18cc58802291e91b6c9a2842d7215f6e1a5e --- /dev/null +++ b/components/ysearch/iconfont.wxss @@ -0,0 +1,21 @@ +@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"; +} + diff --git a/components/ysearch/search.js b/components/ysearch/search.js new file mode 100644 index 0000000000000000000000000000000000000000..dc39137d2f7971d47cbd2cead89387df2c1577c0 --- /dev/null +++ b/components/ysearch/search.js @@ -0,0 +1,85 @@ +// 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) + } + } +}) diff --git a/components/ysearch/search.json b/components/ysearch/search.json new file mode 100644 index 0000000000000000000000000000000000000000..e8cfaaf80c404eb97d3cf8b6277ec15f37e6905e --- /dev/null +++ b/components/ysearch/search.json @@ -0,0 +1,4 @@ +{ + "component": true, + "usingComponents": {} +} \ No newline at end of file diff --git a/components/ysearch/search.wxml b/components/ysearch/search.wxml new file mode 100644 index 0000000000000000000000000000000000000000..c24aeb590aa63eeb4809d5f295ba23d330f0ede2 --- /dev/null +++ b/components/ysearch/search.wxml @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/components/ysearch/search.wxss b/components/ysearch/search.wxss new file mode 100644 index 0000000000000000000000000000000000000000..b0805bfdafb071f5ecc164b5f02a1831701f85bc --- /dev/null +++ b/components/ysearch/search.wxss @@ -0,0 +1,54 @@ +@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 diff --git a/pages/RainSnow/rainsnow.js b/pages/RainSnow/rainsnow.js new file mode 100644 index 0000000000000000000000000000000000000000..266b95cfdb2729576630ff50661cd36cb430a5b5 --- /dev/null +++ b/pages/RainSnow/rainsnow.js @@ -0,0 +1,95 @@ +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 diff --git a/pages/RainSnow/rainsnow.json b/pages/RainSnow/rainsnow.json new file mode 100644 index 0000000000000000000000000000000000000000..8835af0699ccec004cbe685ef938cd2d63ea7037 --- /dev/null +++ b/pages/RainSnow/rainsnow.json @@ -0,0 +1,3 @@ +{ + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/RainSnow/rainsnow.wxml b/pages/RainSnow/rainsnow.wxml new file mode 100644 index 0000000000000000000000000000000000000000..87d4cb6e3e633bdda6e1fce478fb982562daa518 --- /dev/null +++ b/pages/RainSnow/rainsnow.wxml @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/pages/RainSnow/rainsnow.wxss b/pages/RainSnow/rainsnow.wxss new file mode 100644 index 0000000000000000000000000000000000000000..52166fe0bce1ec1738db3f9029539d073a407a11 --- /dev/null +++ b/pages/RainSnow/rainsnow.wxss @@ -0,0 +1,19 @@ +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 diff --git a/pages/alphabet/alphabet.js b/pages/alphabet/alphabet.js index ea0a9b280430bdf5bba4098a9d708d96ab09bf26..dd6f12d1b3709e91f2d94b05b5ed7a733236f114 100644 --- a/pages/alphabet/alphabet.js +++ b/pages/alphabet/alphabet.js @@ -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']} + ] }, diff --git a/pages/alphabet/alphabet.json b/pages/alphabet/alphabet.json index 58dbd5e2a60e9c2571139fa7a6db6a1b4201d29d..032345698f633f2a308fc34c0a4a5c1b74ac97a4 100644 --- a/pages/alphabet/alphabet.json +++ b/pages/alphabet/alphabet.json @@ -1,4 +1,5 @@ { + "navigationBarTitleText": "自定义侧边栏字母导航组件", "usingComponents": { "y-alphabet":"../../components/alphabet/alphabet" } diff --git a/pages/calendar/calendar.js b/pages/calendar/calendar.js index c3c409beea4ebb5877156414a996d652abf8e45f..9effa14f684d55410a0e8f371c561ea171fa51a8 100644 --- a/pages/calendar/calendar.js +++ b/pages/calendar/calendar.js @@ -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 diff --git a/pages/calendar/calendar.json b/pages/calendar/calendar.json index 076656bf8c922296541b309d822c53057ba6daa6..e3323a71acee09d69b70affffdf7fed207b828cc 100644 --- a/pages/calendar/calendar.json +++ b/pages/calendar/calendar.json @@ -1,4 +1,5 @@ { + "navigationBarTitleText": "自定义日历组件", "usingComponents": { "y-calendar":"../../components/calendar/calendar" } diff --git a/pages/calendar/calendar.wxml b/pages/calendar/calendar.wxml index 3757d96e0f2431565996261d92382bb9ebaedc67..eed0cd64499511d1b4ae8d79f554a7e1bfce899c 100644 --- a/pages/calendar/calendar.wxml +++ b/pages/calendar/calendar.wxml @@ -1,8 +1,21 @@ +第一种使用方式：直接选择(这种可用于外面嵌套一个view然后改变大小后用position做一个悬浮) - 选择时间 - + + - \ No newline at end of file +第二种使用方式：弹出式(请点击下面那个按钮) + + + + 选择日期 + {{now_date}} {{now_week}} + + 请选择日期 + 如有变动请修改后再次提交 + + + + \ No newline at end of file diff --git a/pages/calendar/calendar.wxss b/pages/calendar/calendar.wxss index 91973eaa1169ce05ed63bba8537f4ad21fee613b..a89cab06af58d9e618b186592b137ce4079b6ee7 100644 --- a/pages/calendar/calendar.wxss +++ b/pages/calendar/calendar.wxss @@ -1 +1,62 @@ -/* 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 diff --git a/pages/card/card.js b/pages/card/card.js new file mode 100644 index 0000000000000000000000000000000000000000..38f39bf1bce7839568f9a627541121b5cc196d88 --- /dev/null +++ b/pages/card/card.js @@ -0,0 +1,74 @@ +// 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 diff --git a/pages/card/card.json b/pages/card/card.json new file mode 100644 index 0000000000000000000000000000000000000000..f38325669e29f384f5a492b8ca8d156ab49b66d2 --- /dev/null +++ b/pages/card/card.json @@ -0,0 +1,6 @@ +{ + "navigationBarTitleText": "自定义card卡片组件", + "usingComponents": { + "y-card":"/components/ycard/ycard" + } +} \ No newline at end of file diff --git a/pages/card/card.wxml b/pages/card/card.wxml new file mode 100644 index 0000000000000000000000000000000000000000..29c74dceca228aaed3e0ddc9fe8154d9b41932a0 --- /dev/null +++ b/pages/card/card.wxml @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pages/card/card.wxss b/pages/card/card.wxss new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/pages/coupon/coupon.json b/pages/coupon/coupon.json index ffda0a0f85778fa87cf8169ac80a11a06213f4bc..c40121b2b3f4ea968108556d58e674b0393caad2 100644 --- a/pages/coupon/coupon.json +++ b/pages/coupon/coupon.json @@ -1,4 +1,5 @@ { + "navigationBarTitleText": "自定义选项卡组件", "usingComponents": { "y-coupon":"/components/coupon/coupon" } diff --git a/pages/coupon/coupon.wxml b/pages/coupon/coupon.wxml index ca76e895be4d217331e1e93327a1bfafa0725e50..26e996b6880840c27562f2e0e4853a3f8d8a14a6 100644 --- a/pages/coupon/coupon.wxml +++ b/pages/coupon/coupon.wxml @@ -1,5 +1,6 @@ - + + 今日头条 uagiuagfiuagf以按广东省覅蒛以爱的功夫撒个 \ No newline at end of file diff --git a/pages/coupon/img/localSDK.png b/pages/coupon/img/localSDK.png new file mode 100644 index 0000000000000000000000000000000000000000..1dadf8183f428386a70a996cee34dee173c12da1 Binary files /dev/null and b/pages/coupon/img/localSDK.png differ diff --git a/pages/index/index.js b/pages/index/index.js index 9a120072702c644b39678bb2314499007fd51f0a..172488f4d420e33fba7b5013b4ba25ba6070e876 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -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) }, diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 7e07e65f26d5d5f1dd4535933c10562e20d21d2e..1f2190dc754e2a79b717370585288afcc17f8a52 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -10,6 +10,24 @@ 去康康“自定义侧边栏字母导航组件”吧！ + + 去康康“自定义弹出框yModel组件”吧！ + + + 去康康“自定义搜索栏ysearch组件”吧！ + + + 去康康“自定义卡片ycard组件”吧！ + + + 去康康“自定义雨雪系统RainSnow组件”吧！ + + + 去康康“自定义按钮button组件”吧！ + + + + 更多内容，敬请期待 ... @@ -17,10 +35,7 @@ 项目开源地址： - {{url_one}} - - 或： {{url_two}} - 在其中你可以看到详细代码及注释以及使用方式（本小程序版本只展示其中一种应用方式） + 在其中你可以看到详细代码及注释以及使用方式（本小程序版本只展示其中一种或几种应用方式）\n\n有任何疑问欢迎提issue！ \ No newline at end of file diff --git a/pages/index/index.wxss b/pages/index/index.wxss index 2436461ee6c27d69d403da06dce087b00438feaf..81366044f0336a2454b6d15a2ccc28001799916b 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -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; diff --git a/pages/notices/notices.json b/pages/notices/notices.json index 6a728418b44ed8f84a5ac44493cedb35390a5a29..f67f99265cc4d9dca8338076d31132d1bf9a79b9 100644 --- a/pages/notices/notices.json +++ b/pages/notices/notices.json @@ -1,5 +1,5 @@ { - "navigationBarTitleText": "通知", + "navigationBarTitleText": "自定义日期组件", "usingComponents": { "y-picker":"../../components/yPicker/ypicker" } diff --git a/pages/notices/notices.wxml b/pages/notices/notices.wxml index 744d6d877e267251bdd0a73c77fb8ca81180ca2d..f2d729e27900fae9733cdb7e5a7ab522354a5a03 100644 --- a/pages/notices/notices.wxml +++ b/pages/notices/notices.wxml @@ -1,11 +1,20 @@
- 通知时间 + 通知时间（s） + + + 通知时间（精确到分） + + + + + +
diff --git a/pages/search/search.js b/pages/search/search.js new file mode 100644 index 0000000000000000000000000000000000000000..18d04af86028399dec3c1c32c27dbb07a270176f --- /dev/null +++ b/pages/search/search.js @@ -0,0 +1,73 @@ +// 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 diff --git a/pages/search/search.json b/pages/search/search.json new file mode 100644 index 0000000000000000000000000000000000000000..48227a7b6a1328d8c5098f7a398308e6b636a67e --- /dev/null +++ b/pages/search/search.json @@ -0,0 +1,6 @@ +{ + "navigationBarTitleText": "自定义搜索栏组件", + "usingComponents": { + "y-search":"/components/ysearch/search" + } +} \ No newline at end of file diff --git a/pages/search/search.wxml b/pages/search/search.wxml new file mode 100644 index 0000000000000000000000000000000000000000..664902a306ed130033a91cddbe1efa5e04cc5562 --- /dev/null +++ b/pages/search/search.wxml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/pages/search/search.wxss b/pages/search/search.wxss new file mode 100644 index 0000000000000000000000000000000000000000..5ac0fe8ee1c290b02ad18504b452d1168199af43 --- /dev/null +++ b/pages/search/search.wxss @@ -0,0 +1,3 @@ +view{ + margin-top: 100rpx; +} \ No newline at end of file diff --git a/pages/tdetail/tdetail.js b/pages/tdetail/tdetail.js index 6caedee70e697a094db575b2324c5b9fecbfb1a3..081b07c599d7df063f7081d8b4b99306bd4cd1ec 100644 --- a/pages/tdetail/tdetail.js +++ b/pages/tdetail/tdetail.js @@ -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) }, /** diff --git a/pages/tdetail/tdetail.json b/pages/tdetail/tdetail.json index 8835af0699ccec004cbe685ef938cd2d63ea7037..ac28965a692606ab14c32213fb9513217cb6eaf5 100644 --- a/pages/tdetail/tdetail.json +++ b/pages/tdetail/tdetail.json @@ -1,3 +1,6 @@ { - "usingComponents": {} + "navigationBarTitleText": "自定义model弹出窗组件", + "usingComponents": { + "y-model":"/components/yModel/ymodel" + } } \ No newline at end of file diff --git a/pages/tdetail/tdetail.wxml b/pages/tdetail/tdetail.wxml index ee595e2d78db8673802f8f9b34d417a36e22b9b3..08cc4b3cb11bf11ea8c8db66e6f3366c4df60c70 100644 --- a/pages/tdetail/tdetail.wxml +++ b/pages/tdetail/tdetail.wxml @@ -1,2 +1,22 @@ - -pages/tdetail/tdetail.wxml +居中式多行弹窗 +普通多行弹窗 +普通单行弹窗 +标题自定义多行弹窗 +按钮自定义多行弹窗 +看，我大小不一样 + + + + sadas + safafa + sadas + safafa + sadas + + + + + + sadasdadads + + \ No newline at end of file diff --git a/pages/tdetail/tdetail.wxss b/pages/tdetail/tdetail.wxss index 161ce82f0625e6dfd149091702ecd23a134321fb..8dbf92d9abdca6f42432c789d47c4d38969d8567 100644 --- a/pages/tdetail/tdetail.wxss +++ b/pages/tdetail/tdetail.wxss @@ -1 +1,39 @@ -/* 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 diff --git a/pages/ybutton/ybutton.js b/pages/ybutton/ybutton.js new file mode 100644 index 0000000000000000000000000000000000000000..4af854c271c6418d11dd6551b03719538040ecd6 --- /dev/null +++ b/pages/ybutton/ybutton.js @@ -0,0 +1,13 @@ +// pages/ybutton/ybutton.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + + }, + bindleTap:function(e){ + console.log(e) + } +}) \ No newline at end of file diff --git a/pages/ybutton/ybutton.json b/pages/ybutton/ybutton.json new file mode 100644 index 0000000000000000000000000000000000000000..1d950f4ead3e35b520c221d8ae5e6a69ec81d2dc --- /dev/null +++ b/pages/ybutton/ybutton.json @@ -0,0 +1,6 @@ +{ + "navigationBarTitleText": "自定义button组件", + "usingComponents": { + "y-button":"/components/ybutton/ybutton" + } +} \ No newline at end of file diff --git a/pages/ybutton/ybutton.wxml b/pages/ybutton/ybutton.wxml new file mode 100644 index 0000000000000000000000000000000000000000..23f5944a2cfef8bb88113cae493365935555beaf --- /dev/null +++ b/pages/ybutton/ybutton.wxml @@ -0,0 +1,11 @@ +自定义倒计时时间、倒计时文字、触发按钮时文字 + + +自定义倒计时时间、触发按钮时文字 + + +自定义倒计时时间 + + +一切按照默认值 + \ No newline at end of file diff --git a/pages/ybutton/ybutton.wxss b/pages/ybutton/ybutton.wxss new file mode 100644 index 0000000000000000000000000000000000000000..90e6fb6b15a6d68a6092328e3e061c75a352bdc9 --- /dev/null +++ b/pages/ybutton/ybutton.wxss @@ -0,0 +1 @@ +/* pages/ybutton/ybutton.wxss */ \ No newline at end of file diff --git a/project.config.json b/project.config.json index 7943b5626ef18f1041069ac659e6ee5853acabda..64c2d391e12b10eee51c9e58305ec2c91a3bd210 100644 --- a/project.config.json +++ b/project.config.json @@ -1,70 +1,72 @@ { - "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 diff --git a/utils/effect.js b/utils/effect.js new file mode 100644 index 0000000000000000000000000000000000000000..850984cb62bed81b9924ae7a2307efdc2d3520fa --- /dev/null +++ b/utils/effect.js @@ -0,0 +1,169 @@ +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