├── pages ├── index │ ├── index.json │ ├── index.wxml │ ├── index.wxss │ └── index.js ├── delLeft │ ├── delLeft.json │ ├── delLeft.wxml │ ├── delLeft.wxss │ └── delLeft.js ├── linkage │ ├── linkage.json │ ├── linkage.wxml │ ├── linkage.wxss │ └── linkage.js ├── progress │ ├── progress.json │ ├── progress.wxss │ ├── progress.wxml │ └── progress.js ├── swiper │ ├── swiper.json │ ├── swiper.wxss │ ├── swiper.wxml │ └── swiper.js ├── uplink │ ├── uplink.json │ ├── uplink.wxml │ ├── uplink.js │ └── uplink.wxss ├── markup-card │ ├── markup-card.json │ ├── markup-card.wxml │ ├── markup-card.wxss │ └── markup-card.js ├── posterShare │ ├── posterShare.json │ ├── posterShare.wxml │ ├── posterShare.wxss │ └── posterShare.js ├── chooseImgByPre │ ├── chooseImgByPre.json │ ├── chooseImgByPre.wxml │ ├── chooseImgByPre.wxss │ └── chooseImgByPre.js └── logs │ ├── logs.json │ ├── logs.wxss │ ├── logs.wxml │ └── logs.js ├── images └── posterbg.jpg ├── sitemap.json ├── app.wxss ├── utils └── util.js ├── app.json ├── README.md ├── api ├── delList.js └── linkage.js ├── app.js └── project.config.json /pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /pages/delLeft/delLeft.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /pages/linkage/linkage.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /pages/progress/progress.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /pages/swiper/swiper.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /pages/uplink/uplink.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /pages/markup-card/markup-card.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /pages/posterShare/posterShare.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /pages/chooseImgByPre/chooseImgByPre.json: -------------------------------------------------------------------------------- 1 | { 2 | "usingComponents": {} 3 | } -------------------------------------------------------------------------------- /images/posterbg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshime/weChatSkill/HEAD/images/posterbg.jpg -------------------------------------------------------------------------------- /pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志", 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /pages/logs/logs.wxss: -------------------------------------------------------------------------------- 1 | .log-list { 2 | display: flex; 3 | flex-direction: column; 4 | padding: 40rpx; 5 | } 6 | .log-item { 7 | margin: 10rpx; 8 | } 9 | -------------------------------------------------------------------------------- /sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{index + 1}}. {{log}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /pages/chooseImgByPre/chooseImgByPre.wxml: -------------------------------------------------------------------------------- 1 | 选择图片 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | height: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: space-between; 8 | padding: 200rpx 0; 9 | box-sizing: border-box; 10 | background-color: #fff; 11 | } 12 | 13 | -------------------------------------------------------------------------------- /pages/swiper/swiper.wxss: -------------------------------------------------------------------------------- 1 | swiper{ 2 | margin-top: 50rpx; 3 | } 4 | 5 | .slide-image { 6 | width: 100%; 7 | height: 100%; 8 | } 9 | 10 | .zoom-out { 11 | transform: scale(0.8); 12 | transition: all 0.7s ease-out 0s; 13 | } 14 | 15 | .zoom-in { 16 | transform: scale(1); 17 | transition: all 0.7s ease-in 0s; 18 | } -------------------------------------------------------------------------------- /pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | const util = require('../../utils/util.js') 3 | 4 | Page({ 5 | data: { 6 | logs: [] 7 | }, 8 | onLoad: function () { 9 | this.setData({ 10 | logs: (wx.getStorageSync('logs') || []).map(log => { 11 | return util.formatTime(new Date(log)) 12 | }) 13 | }) 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /pages/posterShare/posterShare.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 是否保存图片分享 9 | 10 | 是 11 | 否 12 | 13 | -------------------------------------------------------------------------------- /pages/delLeft/delLeft.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{item.title}} 6 | 7 | 删除 8 | 9 | -------------------------------------------------------------------------------- /pages/swiper/swiper.wxml: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 用于实现以下效果： 3 | 4 | 左右菜单联动 5 | 导航栏上下联动 6 | 左滑删除 7 | canvas绘制海报并分享 8 | 图片上传与预览 9 | 进度条 10 | 轮播图 11 | 12 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | const formatTime = date => { 2 | const year = date.getFullYear() 3 | const month = date.getMonth() + 1 4 | const day = date.getDate() 5 | const hour = date.getHours() 6 | const minute = date.getMinutes() 7 | const second = date.getSeconds() 8 | 9 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 10 | } 11 | 12 | const formatNumber = n => { 13 | n = n.toString() 14 | return n[1] ? n : '0' + n 15 | } 16 | 17 | module.exports = { 18 | formatTime: formatTime 19 | } 20 | -------------------------------------------------------------------------------- /pages/uplink/uplink.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{item.name}} 4 | 5 | 6 | {{item.list}} 7 | 8 | -------------------------------------------------------------------------------- /pages/uplink/uplink.js: -------------------------------------------------------------------------------- 1 | // pages/uplink/uplink.js 2 | import linkageList from '../../api/linkage' 3 | Page({ 4 | 5 | /** 6 | * 页面的初始数据 7 | */ 8 | data: { 9 | list: linkageList, 10 | curIndex: 0, 11 | scrollLefts: 0, 12 | duration:300 13 | }, 14 | // 导航栏滑动 15 | tabNav(e) { 16 | let index = e.target.dataset.index; 17 | this.setData({ 18 | curIndex: index, 19 | scrollLefts: (index - 2) * 65 20 | }) 21 | }, 22 | // 内容滑动 23 | changeScroll(e) { 24 | let index = e.detail.current; 25 | this.setData({ 26 | curIndex: index, 27 | scrollLefts: (index - 2) * 65 28 | }) 29 | } 30 | }) -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index", 4 | "pages/progress/progress", 5 | "pages/delLeft/delLeft", 6 | "pages/uplink/uplink", 7 | "pages/linkage/linkage", 8 | "pages/logs/logs", 9 | "pages/posterShare/posterShare", 10 | "pages/chooseImgByPre/chooseImgByPre", 11 | "pages/markup-card/markup-card", 12 | "pages/swiper/swiper" 13 | ], 14 | "window": { 15 | "backgroundTextStyle": "light", 16 | "navigationBarBackgroundColor": "#458AD5", 17 | "navigationBarTitleText": "weChatSkill", 18 | "navigationBarTextStyle": "white" 19 | }, 20 | "style": "v2", 21 | "sitemapLocation": "sitemap.json" 22 | } -------------------------------------------------------------------------------- /pages/uplink/uplink.wxss: -------------------------------------------------------------------------------- 1 | /* pages/uplink/uplink.wxss */ 2 | .uplink { 3 | width: 100%; 4 | height: 100%; 5 | } 6 | 7 | .scroll-top { 8 | height: 100rpx; 9 | line-height: 100rpx; 10 | width: auto; 11 | background-color: #fff5f5; 12 | } 13 | 14 | .top-item { 15 | display: inline-block; 16 | width: 65px; 17 | text-align: center; 18 | font-size: 32rpx; 19 | color: #333; 20 | } 21 | 22 | .active { 23 | font-size: 36rpx; 24 | color: rgb(216, 27, 27); 25 | } 26 | 27 | .swiper { 28 | padding: 20rpx 30rpx; 29 | height: 100vh; 30 | } 31 | 32 | .swipers-item { 33 | font-size: 32rpx; 34 | color: #333; 35 | line-height: 60rpx; 36 | text-indent: 70rpx; 37 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # weChatSkill 2 | 微信小程序 - 主要包括左右菜单栏联动效果、左滑删除等部分的demo 3 | ### 一、左右菜单栏联动效果 4 | ![leftscrolldate1.gif](https://i.loli.net/2020/04/01/vAN6fT7KtlywQCh.gif) 5 | 6 | ### 二、导航栏部分上下联动 7 | ![leftscrolldate1.gif](https://i.loli.net/2020/04/02/F2347wiXtJMTsou.gif) 8 | 9 | ### 三、左滑删除 10 | ![leftscrolldate1.gif](https://i.loli.net/2020/04/02/2EDqhVCXSb3Qgtn.gif) 11 | 12 | ### 四、canvas绘制海报并实现分享功能 13 | ![1.png](https://i.loli.net/2020/04/09/zRUB8QYqhuLk7cP.png) 14 | 15 | ### 五、图片上传与预览 16 | ![leftscrolldate11.gif](https://i.loli.net/2020/04/10/SYtns1MaRIHxhOF.gif) 17 | 18 | ### 六、进度条的实现 19 | ![leftscrolldate2.gif](https://i.loli.net/2020/04/13/Td9MRvBkFX7PLxo.gif) 20 | 21 | #### 其它功能后续陆续增加~ 22 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | .all { 2 | width: 100%; 3 | height: 100vh; 4 | /* background-color: rgb(247, 244, 241); */ 5 | } 6 | 7 | .title { 8 | line-height: 100rpx; 9 | padding-left: 60rpx; 10 | font-size: 46rpx; 11 | color: #666; 12 | } 13 | 14 | .btn-content { 15 | padding: 20rpx; 16 | display: flex; 17 | flex-direction: column; 18 | align-items: center; 19 | } 20 | 21 | .btn { 22 | border-radius: 15rpx; 23 | margin-bottom: 30rpx; 24 | border: 1rpx solid #eee; 25 | background-color: paleturquoise; 26 | font-weight: normal; 27 | font-weight: 500; 28 | font-size: 36rpx; 29 | color: #555; 30 | width: 300rpx; 31 | padding: 20rpx; 32 | text-align: center; 33 | } -------------------------------------------------------------------------------- /pages/chooseImgByPre/chooseImgByPre.wxss: -------------------------------------------------------------------------------- 1 | .btn { 2 | width: 200rpx; 3 | height: 80rpx; 4 | margin: 20rpx 0; 5 | font-size: 36rpx; 6 | background-color: skyblue; 7 | border-radius: 15rpx; 8 | border: 1rpx solid #eee; 9 | color: #fff; 10 | text-align: center; 11 | line-height: 80rpx; 12 | margin: 20rpx auto; 13 | } 14 | 15 | .allimg { 16 | box-sizing: border-box; 17 | width: 100vw; 18 | /* height: 100vh; */ 19 | display: flex; 20 | justify-content: space-between; 21 | flex-wrap: wrap; 22 | padding: 20rpx 10rpx; 23 | } 24 | 25 | /* 使用伪类元素占据单位，不影响页面 */ 26 | .allimg:after { 27 | content: ""; 28 | height: 0; 29 | width: 235rpx; 30 | } 31 | 32 | image { 33 | width: 235rpx; 34 | height: 260rpx; 35 | display: block; 36 | margin: 8rpx 0; 37 | } -------------------------------------------------------------------------------- /pages/markup-card/markup-card.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 你有一封新的信件 4 | 5 | 6 | 7 | 8 | 9 | 致 {{item.to}} 10 | 11 | 12 | {{item.msg}} 13 | 14 | ··· 15 | By {{item.from}} 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /pages/linkage/linkage.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{item.name}} 6 | 7 | 8 | 9 | 10 | {{item.name}} 11 | 12 | {{items}} 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /api/delList.js: -------------------------------------------------------------------------------- 1 | const delList = [{ 2 | id: 1, 3 | img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/50649d7b5706f4cd9f658e93db6b6564.jpg?thumb=1&w=200&h=200&f=webp&q=90", 4 | title: "小米真无线蓝牙耳机 Air 2", 5 | isTouchMove: false //默认隐藏删除 6 | }, 7 | { 8 | id: 2, 9 | img: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/321610e787393c42e5cb2e5730a7681d.jpg?thumb=1&w=200&h=200", 10 | title: "小米小爱蓝牙音箱 随身版", 11 | isTouchMove: false 12 | }, 13 | { 14 | id: 3, 15 | img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1f32af53d1ad60f4980146f6a2b81019.jpg?thumb=1&w=200&h=200&f=webp&q=90", 16 | title: "小米无线充电宝青春版10000mAh", 17 | isTouchMove: false 18 | }, 19 | { 20 | id: 4, 21 | img: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c149537ebb0c2cdb977ddd93200074f4.jpg?thumb=1&w=200&h=200&f=webp&q=90", 22 | title: "小米旅行箱 20英寸 布朗熊限量版", 23 | isTouchMove: false 24 | } 25 | ] 26 | export default delList; -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | // 左右联动效果 3 | 4 | 5 | Page({ 6 | data: { 7 | 8 | }, 9 | // 左右菜单联动 10 | linkage() { 11 | wx.navigateTo({ 12 | url: '/pages/linkage/linkage' 13 | }) 14 | }, 15 | // 上下菜单联动 16 | upDownLinkage() { 17 | wx.navigateTo({ 18 | url: '/pages/uplink/uplink', 19 | }) 20 | }, 21 | // 左滑 22 | leftSlide() { 23 | wx.navigateTo({ 24 | url: '/pages/delLeft/delLeft', 25 | }) 26 | }, 27 | // 海报 28 | posterShare() { 29 | wx.navigateTo({ 30 | url: '/pages/posterShare/posterShare', 31 | }) 32 | }, 33 | // 图片上传与预览 34 | chooseImgByPre() { 35 | wx.navigateTo({ 36 | url: '/pages/chooseImgByPre/chooseImgByPre', 37 | }) 38 | }, 39 | // 进度条 40 | progress() { 41 | wx.navigateTo({ 42 | url: '/pages/progress/progress', 43 | }) 44 | }, 45 | // 轮播图 46 | swiper() { 47 | wx.navigateTo({ 48 | url: '/pages/swiper/swiper', 49 | }) 50 | }, 51 | }) -------------------------------------------------------------------------------- /pages/posterShare/posterShare.wxss: -------------------------------------------------------------------------------- 1 | /* pages/poster1/poster1.wxss */ 2 | canvas { 3 | position: fixed; 4 | top: 0; 5 | left: -9999px; 6 | } 7 | 8 | .canvas { 9 | width: 800rpx; 10 | height: 1340rpx; 11 | /* background-color: beige; */ 12 | } 13 | 14 | image { 15 | width: 800rpx; 16 | height: 1340rpx; 17 | display: block; 18 | } 19 | 20 | .dialog { 21 | position: fixed; 22 | top: 50%; 23 | left: 50%; 24 | margin-top: -200rpx; 25 | margin-left: -200rpx; 26 | width: 400rpx; 27 | height: 200rpx; 28 | background-color: #fff; 29 | border-radius: 20rpx; 30 | text-align: center; 31 | font-size: 32rpx; 32 | color: #333; 33 | overflow: hidden; 34 | } 35 | 36 | text { 37 | box-sizing: border-box; 38 | height: 100rpx; 39 | line-height: 100rpx; 40 | display: block; 41 | } 42 | 43 | .top { 44 | border-bottom: 1rpx solid #eee; 45 | } 46 | 47 | .bottom { 48 | display: flex; 49 | justify-content: space-around; 50 | } 51 | 52 | .bottom text { 53 | width: 50%; 54 | } 55 | 56 | .yes { 57 | border-right: 1rpx solid #eee; 58 | } -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | // 展示本地存储能力 5 | var logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | 9 | // 登录 10 | wx.login({ 11 | success: res => { 12 | // 发送 res.code 到后台换取 openId, sessionKey, unionId 13 | } 14 | }) 15 | // 获取用户信息 16 | wx.getSetting({ 17 | success: res => { 18 | if (res.authSetting['scope.userInfo']) { 19 | // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 20 | wx.getUserInfo({ 21 | success: res => { 22 | // 可以将 res 发送给后台解码出 unionId 23 | this.globalData.userInfo = res.userInfo 24 | 25 | // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 26 | // 所以此处加入 callback 以防止这种情况 27 | if (this.userInfoReadyCallback) { 28 | this.userInfoReadyCallback(res) 29 | } 30 | } 31 | }) 32 | } 33 | } 34 | }) 35 | }, 36 | globalData: { 37 | userInfo: null 38 | } 39 | }) -------------------------------------------------------------------------------- /pages/linkage/linkage.wxss: -------------------------------------------------------------------------------- 1 | /* pages/linkage/linkage.wxss */ 2 | ::-webkit-scrollbar { 3 | width: 0px; 4 | height: 0px; 5 | } 6 | 7 | .linkage { 8 | width: 100%; 9 | height: 100%; 10 | display: flex; 11 | } 12 | 13 | .scroll-left { 14 | width: 200rpx; 15 | height: 100vh; 16 | text-align: center; 17 | background-color: rgb(247, 240, 230); 18 | } 19 | 20 | .left-item { 21 | height: 50px; 22 | line-height: 50px; 23 | font-size: 32rpx; 24 | color: #333; 25 | } 26 | 27 | .active { 28 | background-color: rgb(238, 149, 97); 29 | color: #fff; 30 | } 31 | 32 | .scroll-right { 33 | height: 100vh; 34 | background-color: rgb(247, 246, 244); 35 | box-sizing: border-box; 36 | padding: 0 20rpx 0 30rpx; 37 | } 38 | 39 | .right-item { 40 | border-bottom: 1rpx solid #ccc; 41 | padding: 30rpx 0; 42 | color: #333; 43 | } 44 | 45 | .rt-title { 46 | text-align: center; 47 | line-height: 80rpx; 48 | font-size: 36rpx; 49 | } 50 | 51 | .content { 52 | padding: 0 10rpx 0 20rpx; 53 | } 54 | 55 | .ct-item { 56 | font-size: 34rpx; 57 | line-height: 50rpx; 58 | } -------------------------------------------------------------------------------- /pages/delLeft/delLeft.wxss: -------------------------------------------------------------------------------- 1 | /* pages/delLeft/delLeft.wxss */ 2 | .dellist { 3 | width: 100%; 4 | height: 100vh; 5 | background-color: #f8f8f8; 6 | } 7 | 8 | .wrap { 9 | width: 100%; 10 | display: flex; 11 | align-items: center; 12 | margin-bottom: 20rpx; 13 | } 14 | 15 | .item { 16 | width: 100%; 17 | display: flex; 18 | align-items: center; 19 | margin-left: -140rpx; 20 | transform: translateX(140rpx); 21 | transition: all 0.4s; 22 | -webkit-transform: translateX(140rpx); 23 | -webkit-transition: all 0.4s; 24 | background-color: #fff; 25 | } 26 | 27 | image { 28 | width: 200rpx; 29 | height: 200rpx; 30 | display: block; 31 | } 32 | 33 | .title { 34 | font-size: 34rpx; 35 | color: #333; 36 | } 37 | 38 | .del { 39 | font-size: 34rpx; 40 | color: #fff; 41 | line-height: 200rpx; 42 | text-align: center; 43 | background-color: #F15151; 44 | width: 140rpx; 45 | transform: translateX(142rpx); 46 | transition: all 0.4s; 47 | -webkit-transform: translateX(142rpx); 48 | -webkit-transition: all 0.4s; 49 | } 50 | 51 | .touch-move .item, 52 | .touch-move .del { 53 | transform: translateX(0); 54 | -webkit-transform: translateX(0); 55 | } -------------------------------------------------------------------------------- /pages/progress/progress.wxss: -------------------------------------------------------------------------------- 1 | .pages{ 2 | padding: 60rpx 0; 3 | } 4 | .progress { 5 | padding: 30rpx; 6 | } 7 | 8 | .styles { 9 | width: 700rpx; 10 | margin-bottom: 30rpx; 11 | } 12 | 13 | text { 14 | padding-left: 30rpx; 15 | font-size: 34rpx; 16 | color: #333; 17 | line-height: 50rpx; 18 | } 19 | 20 | .slider { 21 | width: 700rpx; 22 | margin-bottom: 30rpx; 23 | } 24 | 25 | .sliders { 26 | margin-bottom: 30rpx; 27 | } 28 | 29 | .title { 30 | font-size: 30rpx; 31 | color: #666; 32 | line-height: 30rpx; 33 | padding: 30rpx; 34 | /* background-color: sandybrown; */ 35 | } 36 | 37 | /* 圆形进度条 */ 38 | .cricle { 39 | position: relative; 40 | z-index: 0; 41 | margin: 30rpx 20rpx; 42 | width: 300rpx; 43 | height: 300rpx; 44 | } 45 | 46 | /* 背景 */ 47 | .canvas { 48 | z-index: 1; 49 | width: 300rpx; 50 | height: 300rpx; 51 | } 52 | 53 | /* 进度条 */ 54 | .canvas-mask { 55 | z-index: 2; 56 | position: absolute; 57 | top: 0; 58 | left: 0; 59 | width: 300rpx; 60 | height: 300rpx; 61 | } 62 | 63 | /* 进度率 */ 64 | .rate { 65 | position: absolute; 66 | top: 160rpx; 67 | left: 20rpx; 68 | width: 100%; 69 | text-align: center; 70 | color: #333; 71 | font-size: 30rpx; 72 | } -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": true, 9 | "postcss": true, 10 | "preloadBackgroundData": false, 11 | "minified": true, 12 | "newFeature": true, 13 | "autoAudits": false, 14 | "coverView": true, 15 | "showShadowRootInWxmlPanel": true, 16 | "scopeDataCheck": false 17 | }, 18 | "compileType": "miniprogram", 19 | "libVersion": "2.10.4", 20 | "appid": "wx2f75c2a9d70b2c5f", 21 | "projectname": "weChatSkill", 22 | "debugOptions": { 23 | "hidedInDevtools": [] 24 | }, 25 | "isGameTourist": false, 26 | "simulatorType": "wechat", 27 | "simulatorPluginLibVersion": {}, 28 | "condition": { 29 | "search": { 30 | "current": -1, 31 | "list": [] 32 | }, 33 | "conversation": { 34 | "current": -1, 35 | "list": [] 36 | }, 37 | "plugin": { 38 | "current": -1, 39 | "list": [] 40 | }, 41 | "game": { 42 | "currentL": -1, 43 | "list": [] 44 | }, 45 | "gamePlugin": { 46 | "current": -1, 47 | "list": [] 48 | }, 49 | "miniprogram": { 50 | "current": -1, 51 | "list": [ 52 | { 53 | "id": 0, 54 | "name": "pages/swiper/swiper", 55 | "pathName": "pages/swiper/swiper", 56 | "query": "", 57 | "scene": null 58 | } 59 | ] 60 | } 61 | } 62 | } -------------------------------------------------------------------------------- /pages/linkage/linkage.js: -------------------------------------------------------------------------------- 1 | // pages/linkage/linkage.js 2 | 3 | import linkageList from '../../api/linkage' 4 | 5 | Page({ 6 | 7 | /** 8 | * 页面的初始数据 9 | */ 10 | data: { 11 | list: linkageList, 12 | scrollTops: 0, // 滑动的高度 13 | curIndex: 0, // 当前项 14 | rtCurIndex: 0 15 | }, 16 | 17 | tabNav(e) { 18 | let index = e.target.dataset.index 19 | this.setData({ 20 | curIndex: index, 21 | rtCurIndex: index, 22 | scrollTops: (index - 4) * 50 23 | }) 24 | }, 25 | scrollContent(e) { 26 | let list = this.data.list; 27 | let height = 0; 28 | 29 | for (let i = 0; i < list.length; i++) { 30 | let els = wx.createSelectorQuery().select("#scroll-" + i); 31 | els.fields({ 32 | size: true 33 | }, function (res) { 34 | // console.log(res); 35 | list[i].top = height; 36 | height += res.height; 37 | list[i].bottom = height 38 | }).exec() 39 | } 40 | 41 | this.setData({ 42 | list 43 | }) 44 | 45 | console.log(e); 46 | 47 | let scrollTop = e.detail.scrollTop+20; 48 | 49 | for (let i = 0; i < list.length; i++) { 50 | if (scrollTop > list[i].top && scrollTop < list[i].bottom) { 51 | this.setData({ 52 | curIndex: i, 53 | scrollTops: (i - 4) * 50 54 | }) 55 | return false 56 | } 57 | } 58 | 59 | } 60 | 61 | }) -------------------------------------------------------------------------------- /pages/swiper/swiper.js: -------------------------------------------------------------------------------- 1 | 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | imgUrls: [ 9 | // 'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640', 10 | // 'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640', 11 | // 'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640', 12 | // 'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640', 13 | // 'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640', 14 | // 'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640' 15 | 'http://img3.imgtn.bdimg.com/it/u=3316485073,630900464&fm=26&gp=0.jpg', 16 | 'http://img5.imgtn.bdimg.com/it/u=2314820178,3452136489&fm=26&gp=0.jpg', 17 | 'http://img2.imgtn.bdimg.com/it/u=2991531978,3933259188&fm=26&gp=0.jpg', 18 | 'http://img2.imgtn.bdimg.com/it/u=1742886454,2307269776&fm=26&gp=0.jpg', 19 | 'http://img3.imgtn.bdimg.com/it/u=2259614868,961155351&fm=26&gp=0.jpg', 20 | 'http://img2.imgtn.bdimg.com/it/u=1174877039,3996857209&fm=26&gp=0.jpg' 21 | ], 22 | indicatorDots: true, //是否显示面板指示点 23 | autoplay: true, //是否自动播放 24 | interval: 3000, //停留时间间隔 25 | duration: 1000, //播放时长 26 | previousMargin: '50px', //前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 27 | nextMargin: '50px', //后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 28 | circular: false, //是否采用衔接滑动 29 | currentSwiperIndex: 0, //swiper当前索引 30 | }, 31 | 32 | swiperBindchange(e) { 33 | this.setData({ 34 | currentSwiperIndex: e.detail.current 35 | }) 36 | }, 37 | }) -------------------------------------------------------------------------------- /pages/progress/progress.wxml: -------------------------------------------------------------------------------- 1 | 2 | 一、固定值进度条 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 二、可滑动进度条 12 | 13 | 1.普通进度条 14 | 15 | 16 | 17 | 2.禁用进度条 18 | 19 | 20 | 3.最大/最小值进度条 21 | 22 | 23 | 24 | 三、圆形进度条 25 | 26 | 27 | 28 | {{step}}% 29 | 30 | -------------------------------------------------------------------------------- /pages/delLeft/delLeft.js: -------------------------------------------------------------------------------- 1 | // pages/delLeft/delLeft.js 2 | 3 | import delList from '../../api/delList' 4 | 5 | Page({ 6 | 7 | /** 8 | * 页面的初始数据 9 | */ 10 | data: { 11 | delList: delList, 12 | startX: 0, 13 | startY: 0 14 | }, 15 | // 开始滑动 16 | touchStart(e) { 17 | // console.log(e); 18 | let delList = this.data.delList; 19 | delList.forEach((item, index) => { 20 | item.isTouchMove = false; 21 | }) 22 | 23 | this.setData({ 24 | delList: delList, 25 | startX: e.touches[0].clientX, 26 | startY: e.touches[0].clientY 27 | }) 28 | }, 29 | // 滑动中 30 | touchMove(e) { 31 | let moveX = e.changedTouches[0].clientX 32 | let moveY = e.changedTouches[0].clientY 33 | let indexs = e.target.dataset.index 34 | let delList = this.data.delList 35 | 36 | let angle = this.angle({ 37 | X: this.data.startX, 38 | Y: this.data.startY 39 | }, { 40 | X: moveX, 41 | Y: moveY 42 | }) 43 | 44 | delList.forEach((item, index) => { 45 | if (angle > 30) { 46 | // console.log(11111); 47 | return 48 | } 49 | 50 | if (indexs == index) { 51 | if (moveX > this.data.startX) { // 右滑 52 | item.isTouchMove = false 53 | } else { // 左滑 54 | item.isTouchMove = true 55 | } 56 | } 57 | }) 58 | 59 | this.setData({ 60 | delList 61 | }) 62 | 63 | }, 64 | // 计算角度 65 | angle(start, end) { 66 | let _X = end.X - start.X, 67 | _Y = end.Y - start.Y 68 | return 360 * Math.atan(_Y / _X) / (2 * Math.PI) 69 | }, 70 | // 删除 71 | delItem(e) { 72 | let index = e.target.dataset.index; 73 | let delList = this.data.delList; 74 | delList.splice(index, 1) 75 | this.setData({ 76 | delList 77 | }) 78 | } 79 | 80 | }) -------------------------------------------------------------------------------- /pages/chooseImgByPre/chooseImgByPre.js: -------------------------------------------------------------------------------- 1 | // pages/preImg/preImg.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | imgs: [], 9 | }, 10 | // 选择图片 11 | chooseImg() { 12 | console.log('11111'); 13 | wx.chooseImage({ 14 | success: (res) => { 15 | console.log(res); 16 | let imgList = this.data.imgs; 17 | res.tempFilePaths.forEach((item) => { 18 | imgList.push(item) 19 | }) 20 | console.log('imgList--->', imgList); 21 | 22 | this.setData({ 23 | imgs: imgList 24 | }) 25 | }, 26 | fail: (err) => { 27 | console.log('err--->', err); 28 | 29 | } 30 | }) 31 | }, 32 | // 图片预览 33 | previewImage() { 34 | wx.previewImage({ 35 | urls: this.data.imgs, 36 | success: (res) => { 37 | console.log('res-->', res); 38 | 39 | }, 40 | fail: (err) => { 41 | console.log(err); 42 | 43 | } 44 | }) 45 | }, 46 | /** 47 | * 生命周期函数--监听页面加载 48 | */ 49 | onLoad: function (options) { 50 | 51 | }, 52 | 53 | /** 54 | * 生命周期函数--监听页面初次渲染完成 55 | */ 56 | onReady: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 生命周期函数--监听页面显示 62 | */ 63 | onShow: function () { 64 | 65 | }, 66 | 67 | /** 68 | * 生命周期函数--监听页面隐藏 69 | */ 70 | onHide: function () { 71 | 72 | }, 73 | 74 | /** 75 | * 生命周期函数--监听页面卸载 76 | */ 77 | onUnload: function () { 78 | 79 | }, 80 | 81 | /** 82 | * 页面相关事件处理函数--监听用户下拉动作 83 | */ 84 | onPullDownRefresh: function () { 85 | 86 | }, 87 | 88 | /** 89 | * 页面上拉触底事件的处理函数 90 | */ 91 | onReachBottom: function () { 92 | 93 | }, 94 | 95 | /** 96 | * 用户点击右上角分享 97 | */ 98 | onShareAppMessage: function () { 99 | 100 | } 101 | }) -------------------------------------------------------------------------------- /pages/progress/progress.js: -------------------------------------------------------------------------------- 1 | // pages/progress1/progress1.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | percent1: 30, 9 | percent2: 40, 10 | percent3: 50, 11 | percent4: 60, 12 | percent5: 70, 13 | 14 | curvalue1: 30, 15 | curvalue2: 50, 16 | curvalue3: 60, 17 | curvalue4: 20, 18 | 19 | step: 0 20 | }, 21 | // 完成一次拖动后触发的事件 22 | progressChange(e) { 23 | console.log('完成一次拖动后触发的事件e--->', e); 24 | }, 25 | // 拖动过程中触发的事件 26 | changing(e) { 27 | console.log('拖动过程中触发的事件e--->', e); 28 | }, 29 | /** 30 | * 生命周期函数--监听页面加载 31 | */ 32 | onLoad: function (options) { 33 | this.drawBg() 34 | }, 35 | 36 | // 圆形进度条 37 | drawBg() { 38 | let that = this; 39 | // 画背景圆 40 | const ctx = wx.createCanvasContext('canvasCircle') 41 | ctx.setLineWidth(3); 42 | ctx.setStrokeStyle('#eaeaea'); 43 | ctx.setLineCap('round'); 44 | ctx.beginPath(); 45 | ctx.arc(70, 80, 36, 0, 2 * Math.PI, false); 46 | ctx.stroke(); 47 | ctx.draw(); 48 | 49 | // 加载动画效果 50 | let steps = 1, 51 | startAngle = 1.5 * Math.PI, 52 | endAngle = 0, 53 | speed = 100, // 加载长度 54 | sec = 600; //加载速度 55 | 56 | 57 | // 画加载的圆 58 | function drawing(s, e) { 59 | let ctt = wx.createCanvasContext('canvasRing'); 60 | ctt.setLineWidth(3); 61 | ctt.setStrokeStyle('#11be0f'); 62 | ctt.setLineCap('round'); 63 | ctt.beginPath(); 64 | ctt.arc(70, 80, 36, s, e, false); // 设置圆形进度大小大小 65 | ctt.stroke(); 66 | ctt.draw(); 67 | } 68 | 69 | function drawLoading() { 70 | if (steps < 101) { 71 | //这里用me,同步数据,渲染页面 72 | that.setData({ 73 | step: steps 74 | }) 75 | endAngle = steps * 2 * Math.PI / speed + startAngle; 76 | drawing(startAngle, endAngle); 77 | steps++; 78 | console.log(steps); 79 | } else { 80 | clearInterval(that.interval); 81 | } 82 | } 83 | that.interval = setInterval(drawLoading, sec); 84 | } 85 | }) -------------------------------------------------------------------------------- /pages/markup-card/markup-card.wxss: -------------------------------------------------------------------------------- 1 | .xin{ 2 | padding:0 20px; 3 | } 4 | .xin .title{ 5 | font-size: 14px; 6 | color: #444; 7 | } 8 | .xin .border{ 9 | height: 0; 10 | border-top: 1px solid #ccc; 11 | margin-top: 20px; 12 | width:20%; 13 | } 14 | .xin-list{ 15 | width: 100%; 16 | position: relative; 17 | } 18 | .xin-list .single:nth-of-type(1){ 19 | z-index: 10; 20 | } 21 | /* .xin-list .single:nth-of-type(2){ 22 | position: absolute; 23 | transform: translateX(20px) scale(0.8); 24 | 25 | transform-origin: 100% 50% 0; 26 | top: 0; 27 | z-index: -1; 28 | } 29 | .xin-list .single:nth-of-type(3){ 30 | position: absolute; 31 | transform: translateX(40px) scale(0.6); 32 | 33 | transform-origin: 100% 50% 0; 34 | 35 | top: 0; 36 | z-index: -2; 37 | } 38 | */ 39 | .xin-list .single:nth-of-type(n+4){ 40 | 41 | transform:translateX(40px) scale(0.6); 42 | transform-origin: 100% 50% 0; 43 | } 44 | .xin-list .single{ 45 | transition: all 1s; 46 | overflow: hidden; 47 | border-radius: 1px; 48 | margin-top:15px; 49 | width: calc(100% - 60px); 50 | height: calc(100vh - 150px - 11vh); 51 | background: #fff; 52 | position: absolute; 53 | box-shadow: 3px 3px 10px 0px #777; 54 | } 55 | .xin-shou{ 56 | writing-mode: vertical-lr; 57 | font-size: 15px; 58 | float: left; 59 | padding:10px 2px 10px 2px; 60 | letter-spacing:4px; 61 | margin:0 15px; 62 | position: relative; 63 | top: 50%; 64 | max-height: 80%; 65 | overflow: hidden; 66 | transform: translateY(-50%); 67 | border: 1px solid #999; 68 | } 69 | .xin-body{ 70 | text-indent: 2em; 71 | letter-spacing:0.2em; 72 | writing-mode:vertical-lr; 73 | max-width:40vw; 74 | line-height:8vw; 75 | overflow: hidden; 76 | float: left; 77 | height: 70%; 78 | vertical-align: middle; 79 | position: relative; 80 | top: 50%; 81 | transform: translateY(-50%); 82 | text-align:justify; 83 | } 84 | .shenglue{ 85 | float: left; 86 | height: 70%; 87 | line-height:25px; 88 | width: 25px; 89 | text-align:justify; 90 | writing-mode:vertical-lr; 91 | margin-top: 23%; 92 | letter-spacing:10px; 93 | } 94 | .xin-xie{ 95 | clear: both; 96 | font-size: 12px; 97 | position: absolute; 98 | right: 15px; 99 | bottom: 10px; 100 | } -------------------------------------------------------------------------------- /pages/posterShare/posterShare.js: -------------------------------------------------------------------------------- 1 | // pages/poster1/poster1.js 2 | 3 | Page({ 4 | 5 | /** 6 | * 页面的初始数据 7 | */ 8 | data: { 9 | url: '../../images/posterbg.jpg', 10 | hidden: false, 11 | isShow: false 12 | }, 13 | 14 | /** 15 | * 生命周期函数--监听页面加载 16 | */ 17 | onLoad: function (options) { 18 | let _this = this; 19 | const ctx = wx.createCanvasContext('mycanvas') 20 | ctx.drawImage(_this.data.url, 0, 0, 400, 700); 21 | let text = "床前明月光，疑是地上霜。举头望明月，低头思故乡。" 22 | ctx.fillStyle = "#fff" 23 | ctx.setFontSize(20) 24 | ctx.fillText('静夜思', 135, 200) 25 | ctx.setFontSize(14) 26 | ctx.fillText('李白', 150, 225) 27 | ctx.setFontSize(18) 28 | _this.textPrewrap(ctx, text, 60, 260, 32, 200, 4) 29 | ctx.draw(); 30 | 31 | wx.showToast({ 32 | title: '图片生成中...', 33 | icon: "none", 34 | duration: 1000 35 | }) 36 | setTimeout(() => { 37 | wx.canvasToTempFilePath({ 38 | canvasId: 'mycanvas', 39 | success(res) { 40 | console.log('res-->', res); 41 | _this.setData({ 42 | url: res.tempFilePath, 43 | hidden: true 44 | }) 45 | }, 46 | fail(err) { 47 | console.log('err-->', err); 48 | 49 | }, 50 | complete(res) { 51 | wx.hideToast() 52 | } 53 | }) 54 | }, 500); 55 | 56 | 57 | }, 58 | 59 | // 长按显示弹框 60 | longTap() { 61 | this.setData({ 62 | isShow: true 63 | }) 64 | }, 65 | 66 | yes() { 67 | wx.saveImageToPhotosAlbum({ 68 | filePath: this.data.url, 69 | success(res) { 70 | wx.showToast({ 71 | title: '图片保存成功，去分享吧', 72 | icon: "none" 73 | }) 74 | }, 75 | fail(err) { 76 | wx.showToast({ 77 | title: '图片保存失败啦！', 78 | icon: "none" 79 | }) 80 | } 81 | }) 82 | this.setData({ 83 | isShow: false 84 | }) 85 | }, 86 | no() { 87 | this.setData({ 88 | isShow: false 89 | }) 90 | }, 91 | 92 | /** 93 | * 设置文本换行 94 | * @param {*} ctx 画布的上下文环境 95 | * @param {*} content 需要绘制的文本内容 96 | * @param {*} drawX 绘制文本的x坐标 97 | * @param {*} drawY 绘制文本的y坐标 98 | * @param {*} lineHeight 文本之间的行高 99 | * @param {*} lineMaxWidth 每行文本的最大宽度 100 | * @param {*} lineNum 最多绘制的行数 101 | */ 102 | textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) { 103 | var drawTxt = ''; // 当前绘制的内容 104 | var drawLine = 1; // 第几行开始绘制 105 | var drawIndex = 0; // 当前绘制内容的索引 106 | 107 | // 判断内容是否可以一行绘制完毕 108 | if (ctx.measureText(content).width <= lineMaxWidth) { 109 | ctx.fillText(content.substring(drawIndex, i), drawX, drawY); 110 | } else { 111 | for (var i = 0; i < content.length; i++) { 112 | drawTxt += content[i]; 113 | if (ctx.measureText(drawTxt).width >= lineMaxWidth) { 114 | if (drawLine >= lineNum) { 115 | ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY); 116 | break; 117 | } else { 118 | ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY); 119 | drawIndex = i + 1; 120 | drawLine += 1; 121 | drawY += lineHeight; 122 | drawTxt = ''; 123 | } 124 | } else { 125 | // 内容绘制完毕，但是剩下的内容宽度不到lineMaxWidth 126 | if (i === content.length - 1) { 127 | ctx.fillText(content.substring(drawIndex), drawX, drawY); 128 | } 129 | } 130 | } 131 | } 132 | }, 133 | 134 | /** 135 | * 生命周期函数--监听页面初次渲染完成 136 | */ 137 | onReady: function () { 138 | 139 | }, 140 | 141 | /** 142 | * 生命周期函数--监听页面显示 143 | */ 144 | onShow: function () { 145 | 146 | }, 147 | 148 | /** 149 | * 生命周期函数--监听页面隐藏 150 | */ 151 | onHide: function () { 152 | 153 | }, 154 | 155 | /** 156 | * 生命周期函数--监听页面卸载 157 | */ 158 | onUnload: function () { 159 | 160 | }, 161 | 162 | /** 163 | * 页面相关事件处理函数--监听用户下拉动作 164 | */ 165 | onPullDownRefresh: function () { 166 | 167 | }, 168 | 169 | /** 170 | * 页面上拉触底事件的处理函数 171 | */ 172 | onReachBottom: function () { 173 | 174 | }, 175 | 176 | /** 177 | * 用户点击右上角分享 178 | */ 179 | onShareAppMessage: function () { 180 | 181 | } 182 | }) -------------------------------------------------------------------------------- /api/linkage.js: -------------------------------------------------------------------------------- 1 | const linkageList = [{ 2 | name: '梨花雪', 3 | list: [ 4 | '时光年轮一圈圈转着', 5 | '现在，他站在原地，回首望去，从前点点滴滴，琐琐碎碎', 6 | '猛然发现，自己已走过了这么多', 7 | '他想，如果再次遇到下雪天，他会毫不犹豫迎上去', 8 | '因为那里，有旧时光味道。他仍在怀念，仍在留恋。怀念，白雪纷扬日子。' 9 | ] 10 | }, { 11 | name: '冰雪消融', 12 | list: [ 13 | '友情是每个人都应有的东西，而且相当的珍贵', 14 | '在朋友之间，难免会产生分歧，让友情结冰', 15 | '但我现在知道，友情上消融的冰雪是暖的。' 16 | ] 17 | }, 18 | { 19 | name: '境由心造', 20 | list: [ 21 | '有人安于某种生活，有人不能', 22 | '因此能安于自已目前处境的不妨就如此生活下去，不能的只好努力另找出路', 23 | '你无法断言哪里才是成功的，也无法肯定当自已到达了某一点之后，会不会快乐', 24 | '有些人永远不会感到满足，他的快乐只建立在不断地追求与争取的过程之中', 25 | '因此，他的目标不断地向远处推移。这种人的快乐可能少，但成就可能大。' 26 | ] 27 | }, 28 | { 29 | name: '处世之道', 30 | list: [ 31 | '有一群豪猪，就是野猪啊，身上长刺的那种野猪', 32 | '大家挤在一起过冬，它们老有一个困惑', 33 | '就是不知道大家在一起以什么样的距离最好', 34 | '离得稍微远一点，冬天就冷，互相借不着热气，大家就往一起凑凑', 35 | '结果一旦凑近了，彼此的刺都扎着对方了', 36 | '就又开始远离', 37 | '但是再远的话大家又觉得寒冷', 38 | '又想借助别人的温暖，就再凑，凑着凑着又受伤了', 39 | '然后再拉远，多少次磨合以后豪猪们终于找到了一种最最恰如其分的距离', 40 | '那就是在彼此不伤害的前提下，保持着群体的温暖。' 41 | ], 42 | }, 43 | { 44 | name: '夏天', 45 | list: [ 46 | '夏天的夜色很美，清爽的晚风哼着小曲来到了我们身边', 47 | '给我们送来了一丝丝凉意', 48 | '夜空中，星星眨着眼睛，静静地听着月亮姐姐讲故事', 49 | '这动听的故事，激发了星星们的想象', 50 | '星星们都在窃窃私语地讨论着，难道是在讨论演讲稿，到哪里发表演讲吗', 51 | '周围一片宁静，只有晚风在低低地吟唱', 52 | '月光洒向永不停息的小河，洒向盛开在夜晚的流星花，仿佛一切都活了', 53 | '萤火虫提着小灯笼，殷勤地照看着花儿、草儿，让他们快快长大、开花。' 54 | ] 55 | }, { 56 | name: '风筝', 57 | list: [ 58 | '一只跌落在脚边的风筝把我拉回到现实', 59 | '是啊！无论风筝飞的多高、多远，但都离不开手中的丝线', 60 | '最后还是要回到地面。人不也一样吗', 61 | '长大了，成家了，但无论离开故乡多远，离开亲人多远，你的心还在故乡，还在父母亲人的身边啊！' 62 | ] 63 | }, { 64 | name: '春雨', 65 | list: ['我赤脚站到院中，踩在青石板上', 66 | '任雨水在我脸上流淌，我不禁抬起头望着那天空', 67 | '努力的想要看清春雨的样子，却怎么也看不清', 68 | '只听得见耳边的声音，那么清晰那么让人心情舒畅', 69 | '这温柔的春雨，带来他最动听的声音，击打着石台', 70 | '发出清脆的响声，声音透过雨帘，透进了我的心。' 71 | ] 72 | }, { 73 | name: '拥有', 74 | list: [ 75 | '拥有诚实，就舍弃了虚伪', 76 | '拥有充实，就舍弃了无聊；拥有踏实，就舍弃了浮躁', 77 | '不论是有意的丢弃，还是意外的失去，只要曾经真实的拥有，在一些时候，大度的舍弃不也是一种境界吗', 78 | '在不经意所失去的， 你还可以重新去争取 ', 79 | '丢掉了爱心， 你可以在春天里寻觅， 丢掉了意志， 你要在冬天重新磨砺。', 80 | '但是丢掉了懒惰， 你却不能把它拾起 ', 81 | '欲望太多， 反成了累赘， 还有什么比拥有淡泊的心胸， 更能让自己充实、 满足呢？ ' 82 | ] 83 | }, { 84 | name: "信任", 85 | list: [ 86 | '信任一个人有时需要许多年的时间', 87 | '因此，有些人甚至终其一生也没有真正信任过任何一个人', 88 | '倘若你只信任那些能够讨你欢心的人，那是毫无意义的', 89 | '倘若你信任你所见到的每一个人，那你就是一个傻瓜', 90 | '倘若你毫不犹疑、匆匆忙忙地去信任一个人，那你就可能也会那么快地被你所信任的那个人背弃', 91 | '倘若你只是出于某种肤浅的需要去信任一个人，那么旋踵而来的可能就是恼人的猜忌和背叛', 92 | '但倘若你迟迟不敢去信任一个值得你信任的人，那永远不能获得爱的甘甜和人间的温暖，你的一生也将会因此而黯淡无光。' 93 | ] 94 | }, { 95 | name: '生命', 96 | list: [ 97 | '应当承认，生命就是希望', 98 | '应当说，卑鄙和庸俗不该得意过早，不该误认为它们已经成功地消灭了高尚和真纯', 99 | '伪装也同样不能持久，因为时间像一条长河在滔滔冲刷', 100 | '卑鄙者、奸商和俗棍不可能永远戴着教育家、诗人和战士的桂冠', 101 | '在他们畅行无阻的生涯尽头，他们的后人将长久地感到羞辱。' 102 | ] 103 | }, { 104 | name: '闲情', 105 | list: [ 106 | '终日休息着，睡和醒的时间界限，便分得不清', 107 | '有时在中夜，觉得精神很圆满', 108 | '——听得疾雷杂以疏雨，每次电光穿入', 109 | '将窗台上的金钟花，轻淡清澈的映在窗帘上，又急速的隐抹了去', 110 | '而余影极分明的，印在我的脑膜上。我看见“自然”的淡墨画，这是第一次。' 111 | ] 112 | }, { 113 | name: '背影', 114 | list: [ 115 | '我与父亲不相见已二年余了，我最不能忘记的是他的背影', 116 | '那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子', 117 | '我从北京到徐州，打算跟着父亲奔丧回家', 118 | '到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪', 119 | '父亲说，“事已如此，不必难过，好在天无绝人之路！”' 120 | ] 121 | }, { 122 | name: '乡愁', 123 | list: [ 124 | '经过多年的风雨磨砺，我们突然意识到', 125 | '那些曾在生命中抚慰过我们的精神驿站', 126 | '那些曾温暖和光明过我们的贫寒童年的火光', 127 | '却在不经意间，渐渐地离我们远了', 128 | '模糊了——譬如母亲、譬如童年的老屋、隔壁家羊角辫摇摇摆摆的阿娇一种难以驱遣的巨大空虚和孤寂袭来', 129 | '泪水顿时涌上来。这时，我们患了一种蔓延了几个世纪的病——乡愁' 130 | ] 131 | }, { 132 | name: '天池', 133 | list: [ 134 | '从第一眼瞥见天池到和她告别，我一直沉默不语', 135 | '我不愿用一点声音，来弹破这宁静', 136 | '天池一日我的心情是宁静的，这是我最珍爱的心境', 137 | '山光湖色随着日影的移动而变幻', 138 | '午餐后，睡了一会儿，一阵冷气袭来，就像全身浴在冰山雪水之中', 139 | '我悄悄起来，不愿惊醒别人，独自走到廊上', 140 | '再次仔细观察天池：雪峰与杉林，白与黑相映，格外分明', 141 | '雪山后涌起的白云给强烈阳光照得白银一样刺眼。' 142 | ] 143 | }, { 144 | name: '秋天', 145 | list: [ 146 | '秋姑娘又来到了果园里', 147 | '果园里的果子成熟了，葡萄架上挂满了一串串紫里透红的大葡萄', 148 | '它们相互掩映着自己的身体，太阳出来了', 149 | '照射在葡萄上就像一颗颗透明的紫色宝石', 150 | '桔树上，一个个金黄色的桔子，让人看了忍不住想咬一口', 151 | '假如你剥开桔皮，你就可以看见一瓣瓣桔子就像一弯弯亏月时的月亮，晶莹剔透。' 152 | ] 153 | }, { 154 | name: '早晨', 155 | list: [ 156 | '清晨的江边，没有车水马龙的喧嚣', 157 | '没有人声鼎沸的吵杂，也没有让人深感压抑的匆匆人群', 158 | '清晨的江边，有的只是垂柳的迎风飘拂', 159 | '有的只是枝头小鸟的婉转歌唱', 160 | '有的只是江风中蕴含着的淡淡的腥味', 161 | '清晨的江边，很静', 162 | '静的可以抚平内心的烦躁', 163 | '清晨的江边，很美，绿树红花、微风拂面，不允许你携带任何忧伤。' 164 | ] 165 | }, { 166 | name: '栾树', 167 | list: [ 168 | '栾树 十二月初，深圳，我在校园的青石板小路上捡到了栾树的蒴果', 169 | ' 栾树蒴果看上去有种似曾相识的漂亮--三瓣又薄又脆的果皮围拢成三棱形', 170 | '前端小心翼翼地开着口。' 171 | ] 172 | }, { 173 | name: '荷塘', 174 | list: [ 175 | '又是一年荷塘色 初夏早上六点', 176 | '清亮透明的月儿还躲藏在云朵里，不忍离去', 177 | '校园内行人稀少，我骑着单车，晃晃悠悠的耷拉着星松的睡眼', 178 | '校园内景色如常，照样是绿。' 179 | ] 180 | } 181 | ] 182 | 183 | export default linkageList; -------------------------------------------------------------------------------- /pages/markup-card/markup-card.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | var app = getApp(); 3 | //获取应用实例 4 | 5 | Page({ 6 | data: { 7 | userInfo: {}, 8 | startX: 0, //开始移动时距离左 9 | endX: 0, //结束移动时距离左 10 | nowPage: 0, //当前是第几个个页面 11 | xinList: [{ 12 | id: 5, 13 | from: '一路向南1', 14 | to: '记得要微笑', 15 | msg: '这么多年咨询信看下来s，让我逐渐明白一件事。 很多时候，咨询的人心里已经有了答案，来咨询只是想确认自己的决定是对的。 所以有些人读过回信后，会再次写信过来， 大概就是因为回答的内容和他的想法不一样。', 16 | display: 0, 17 | scale: '', 18 | slateX: '', 19 | zIndex: 0, 20 | style: '' 21 | }, 22 | { 23 | id: 5, 24 | from: '一路向南2', 25 | to: '记得要微笑', 26 | msg: '这么多年咨询信看下来s，让我逐渐明白一件事。 很多时候，咨询的人心里已经有了答案，来咨询只是想确认自己的决定是对的。 所以有些人读过回信后，会再次写信过来， 大概就是因为回答的内容和他的想法不一样。', 27 | display: 0, 28 | scale: '', 29 | slateX: '', 30 | zIndex: 0, 31 | style: '' 32 | }, 33 | { 34 | id: 5, 35 | from: '一路向南3', 36 | to: '记得要微笑', 37 | msg: '这么多年咨询信看下来，让我逐渐明白一件事。 很多时候，咨询的人心里已经有了答案，来咨询只是想确认自己的决定是对的。 所以有些人读过回信后，会再次写信过来， 大概就是因为回答的内容和他的想法不一样。', 38 | display: 0, 39 | scale: '', 40 | slateX: '', 41 | zIndex: 0, 42 | style: '' 43 | }, 44 | { 45 | id: 5, 46 | from: '一路向南4', 47 | to: '记得要微笑', 48 | msg: '这么多年咨询信看下来，让我逐渐明白一件事。 很多时候，咨询的人心里已经有了答案，来咨询只是想确认自己的决定是对的。 所以有些人读过回信后，会再次写信过来， 大概就是因为回答的内容和他的想法不一样。', 49 | display: 0, 50 | scale: '', 51 | slateX: '', 52 | zIndex: 0, 53 | style: '' 54 | }, 55 | { 56 | id: 5, 57 | from: '一路向南5', 58 | to: '记得要微笑', 59 | msg: '这么多年咨询信看下来，让我逐渐明白一件事。 很多时候，咨询的人心里已经有了答案，来咨询只是想确认自己的决定是对的。 所以有些人读过回信后，会再次写信过来， 大概就是因为回答的内容和他的想法不一样。', 60 | display: 0, 61 | scale: '', 62 | slateX: '', 63 | zIndex: 0, 64 | style: '' 65 | }, 66 | { 67 | id: 5, 68 | from: '一路向南6', 69 | to: '记得要微笑', 70 | msg: '这么多年咨询信看下来，让我逐渐明白一件事。 很多时候，咨询的人心里已经有了答案，来咨询只是想确认自己的决定是对的。 所以有些人读过回信后，会再次写信过来， 大概就是因为回答的内容和他的想法不一样。', 71 | display: 0, 72 | scale: '', 73 | slateX: '', 74 | zIndex: 0, 75 | style: '' 76 | }, 77 | { 78 | id: 5, 79 | from: '一路向南7', 80 | to: '记得要微笑', 81 | msg: '这么多年咨询信看下来，让我逐渐明白一件事。 很多时候，咨询的人心里已经有了答案，来咨询只是想确认自己的决定是对的。 所以有些人读过回信后，会再次写信过来， 大概就是因为回答的内容和他的想法不一样。', 82 | display: 0, 83 | scale: '', 84 | slateX: '', 85 | zIndex: 0, 86 | style: '' 87 | }, 88 | ] 89 | }, 90 | //事件处理函数 91 | 92 | onLoad: function (e) { 93 | 94 | this.checkPage(this.data.nowPage); 95 | }, 96 | onReady: function () { 97 | 98 | }, 99 | onShareAppMessage: function () { 100 | return { 101 | title: '解忧小酒馆，专治不开心~' 102 | } 103 | }, 104 | //手指触发开始移动 105 | moveStart: function (e) { 106 | var startX = e.changedTouches[0].pageX; 107 | this.setData({ 108 | startX: startX 109 | }); 110 | }, 111 | //手指触摸后移动完成触发事件 112 | moveItem: function (e) { 113 | var that = this; 114 | var endX = e.changedTouches[0].pageX; 115 | this.setData({ 116 | endX: endX 117 | }); 118 | 119 | //计算手指触摸偏移剧距离 120 | var moveX = this.data.startX - this.data.endX; 121 | 122 | //向左移动 123 | if (moveX > 20) { 124 | 125 | if (that.data.nowPage >= (that.data.xinList.length - 1)) { 126 | wx.showToast({ 127 | title: '最后一封信了喔,明天再来吧', 128 | icon: 'none' 129 | }) 130 | return false; 131 | } 132 | that.setData({ 133 | nowPage: that.data.nowPage + 1 134 | }); 135 | this.checkPage(this.data.nowPage); 136 | } 137 | if (moveX < -20) { 138 | if (that.data.nowPage <= 0) { 139 | wx.showToast({ 140 | title: '这是第一封信了喔', 141 | icon: 'none' 142 | }) 143 | return false; 144 | } 145 | that.setData({ 146 | nowPage: that.data.nowPage - 1 147 | }); 148 | this.checkPage(this.data.nowPage); 149 | 150 | // wx.showToast({ 151 | // title: '不可以回退噢', 152 | // icon:'none' 153 | // }) 154 | } 155 | 156 | 157 | }, 158 | // 页面判断逻辑,传入参数为当前是第几页 159 | checkPage: function (index) { 160 | //信列表数据 161 | var data = this.data.xinList; 162 | var that = this; 163 | var m = 1; 164 | for (var i = 0; i < data.length; i++) { 165 | //先将所有的页面隐藏 166 | var disp = 'xinList[' + i + '].display'; 167 | var sca = 'xinList[' + i + '].scale'; 168 | var slateX = 'xinList[' + i + '].slateX'; 169 | var zIndex = 'xinList[' + i + '].zIndex'; 170 | var style = 'xinList[' + i + '].style'; 171 | that.setData({ 172 | [disp]: 0, 173 | [style]: "display:block", 174 | }); 175 | //向左移动上一个页面 176 | if (i == (index - 1)) { 177 | that.setData({ 178 | [slateX]: '-120%', 179 | [disp]: 1, 180 | [zIndex]: 2, 181 | 182 | }); 183 | } 184 | //向右移动的最右边要display:none的页面 185 | if (i == (index + 3)) { 186 | that.setData({ 187 | [style]: 'display:none', 188 | [slateX]: '0', 189 | [zIndex]: -10, 190 | }); 191 | } 192 | if (i == index || (i > index && (i < index + 3))) { 193 | //显示最近的三封 194 | that.setData({ 195 | [disp]: 1 196 | }); 197 | //第一封信 198 | if (m == 1) { 199 | this.setData({ 200 | [sca]: 1, 201 | [slateX]: 0, 202 | [zIndex]: 1, 203 | }); 204 | } 205 | //第一封信 206 | else if (m == 2) { 207 | this.setData({ 208 | [sca]: 0.8, 209 | [slateX]: '20px', 210 | [zIndex]: -1, 211 | }); 212 | } 213 | //第三封信 214 | else if (m == 3) { 215 | this.setData({ 216 | [sca]: 0.6, 217 | [slateX]: '40px', 218 | [zIndex]: -2, 219 | }); 220 | } 221 | m++; 222 | } 223 | 224 | } 225 | } 226 | }) --------------------------------------------------------------------------------