├── README.md ├── app.js ├── app.json ├── app.wxss ├── component ├── wxzx-progress │ ├── wxzx-progress.js │ ├── wxzx-progress.json │ ├── wxzx-progress.wxml │ └── wxzx-progress.wxss └── wxzx-slider │ ├── wxzx-slider.js │ ├── wxzx-slider.json │ ├── wxzx-slider.wxml │ └── wxzx-slider.wxss ├── img └── slider.png ├── pages ├── audio │ ├── audio.js │ ├── audio.json │ ├── audio.wxml │ └── audio.wxss ├── index │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── logs │ ├── logs.js │ ├── logs.json │ ├── logs.wxml │ └── logs.wxss ├── newslider │ ├── newslider.js │ ├── newslider.json │ ├── newslider.wxml │ └── newslider.wxss ├── progress │ ├── progress.js │ ├── progress.json │ ├── progress.wxml │ └── progress.wxss └── slider │ ├── slider.js │ ├── slider.json │ ├── slider.wxml │ └── slider.wxss ├── project.config.json └── utils └── util.js /README.md: -------------------------------------------------------------------------------- 1 | # Slider 2 | 小程序 自定义slider组件 3 | -------------------------------------------------------------------------------- /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 | }) -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index", 4 | "pages/progress/progress", 5 | "pages/slider/slider", 6 | "pages/audio/audio", 7 | "pages/newslider/newslider" 8 | ], 9 | "window":{ 10 | "backgroundTextStyle":"light", 11 | "navigationBarBackgroundColor": "#fff", 12 | "navigationBarTitleText": "WeChat", 13 | "navigationBarTextStyle":"black" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiemingdev/Slider/0f148c2b7ca6fed4ad03af01466a41b79a8d72b3/app.wxss -------------------------------------------------------------------------------- /component/wxzx-progress/wxzx-progress.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | properties: { 3 | percent: { 4 | type: [Number, String], 5 | value: 50 6 | }, 7 | width: { 8 | type: [Number, String], 9 | value: 700 10 | }, 11 | strokeWidth: { 12 | type: [Number, String], 13 | value: 10 14 | }, 15 | activeColor: { 16 | type: [String, Array], 17 | value: '#949494' 18 | }, 19 | backgroundColor: { 20 | type: String, 21 | value: '#e5e5e5' 22 | }, 23 | radius: { 24 | type: [Number, String], 25 | value: 5 26 | }, 27 | orientation: { 28 | type: [Number, String], 29 | value: 'landscape' 30 | // slider方向 landscape横向 portrait纵向 31 | }, 32 | portraitOrientation: { 33 | type: [Number, String], 34 | value: 'bottom' 35 | // 纵向方向 top 从上到下 bottom 从下到上 36 | } 37 | }, 38 | attached: function () { 39 | let activeColor = this.data.activeColor; 40 | if (!!~activeColor.indexOf(',')) { 41 | this.setData({ 42 | activeLineColor: activeColor.split(',') 43 | }) 44 | } 45 | } 46 | }) 47 | -------------------------------------------------------------------------------- /component/wxzx-progress/wxzx-progress.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } -------------------------------------------------------------------------------- /component/wxzx-progress/wxzx-progress.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /component/wxzx-progress/wxzx-progress.wxss: -------------------------------------------------------------------------------- 1 | .progress__bg { 2 | position: relative; 3 | } 4 | 5 | .progress__line { 6 | position: absolute; 7 | } -------------------------------------------------------------------------------- /component/wxzx-slider/wxzx-slider.js: -------------------------------------------------------------------------------- 1 | function getSystemScreenRatio() { 2 | var res = wx.getSystemInfoSync(); 3 | return 750 / res.screenWidth 4 | } 5 | Component({ 6 | properties: { 7 | percent: { 8 | type: [Number, String], 9 | value: 100 10 | }, 11 | width: { 12 | type: [Number, String], 13 | value: 700 14 | }, 15 | strokeWidth: { 16 | type: [Number, String], 17 | value: 6 18 | }, 19 | activeColor: { 20 | type: [String, Array], 21 | value: '#FFFAF0, #ff6600' 22 | }, 23 | bufferColor: { 24 | type: String, 25 | value: '#00' 26 | // 默认为无色 27 | }, 28 | backgroundColor: { 29 | type: String, 30 | value: '#e5e5e5' 31 | }, 32 | radius: { 33 | type: [Number, String], 34 | value: 5 35 | }, 36 | blockSrc: { 37 | type: String, 38 | value: null 39 | }, 40 | blockSize: { 41 | type: [Number, String], 42 | value: 40 43 | }, 44 | blockColor: { 45 | type: String, 46 | value: '#FFFFFF' 47 | }, 48 | value: { 49 | type: [Number, String], 50 | value: 0 51 | }, 52 | max: { 53 | type: [Number, String], 54 | value: 100 55 | }, 56 | disabled: { 57 | type: Boolean, 58 | value: false 59 | }, 60 | isCustom: { 61 | type: Boolean, 62 | value: false 63 | }, 64 | blockImageWidth: { 65 | type: [Number, String], 66 | value: 0 67 | }, 68 | blockImageHeight: { 69 | type: [Number, String], 70 | value: 0 71 | }, 72 | orientation: { 73 | type: [Number, String], 74 | value: 'landscape' 75 | // slider方向 landscape横向 portrait纵向 76 | }, 77 | isMonitoring: { 78 | type: Boolean, 79 | value: true 80 | } 81 | }, 82 | data: { 83 | screenRatio: 0, 84 | sliderStartX: 0, 85 | sliderStartY: 0, 86 | startValue: 0, 87 | portraitOrientation: 'bottom', 88 | clickEnlargeSize: 60 89 | }, 90 | attached: function () { 91 | let activeColor = this.data.activeColor; 92 | var that = this 93 | if (!!~activeColor.indexOf(',')) { 94 | this.setData({ 95 | activeLineColor: activeColor.split(',') 96 | }) 97 | } 98 | let blockSize = this.data.blockSize; 99 | if (blockSize > 40) { 100 | this.setData({ 101 | blockSize: 40 102 | }) 103 | } else if (blockSize < 20) { 104 | this.setData({ 105 | blockSize: 20 106 | }) 107 | } 108 | this.setData({ screenRatio: getSystemScreenRatio(), strokeWidth: Number(this.data.strokeWidth) }) 109 | }, 110 | methods: { 111 | sliderTap: function (e) { 112 | if (!this.data.disabled) { 113 | var that = this 114 | var changedTouches = e.changedTouches[0]; 115 | var value = 0 116 | if (this.data.orientation == 'landscape') { 117 | value = this.data.max * ((changedTouches.pageX - e.currentTarget.offsetLeft) * this.data.screenRatio / this.data.width) 118 | } else { 119 | value = this.data.max * ((this.data.width - (changedTouches.pageY - e.currentTarget.offsetTop) * this.data.screenRatio) / this.data.width) 120 | } 121 | 122 | // 超出边界时 123 | if (value < 0 || value > this.data.max) { 124 | return 125 | } 126 | if (this.data.percent <= value / this.data.max * 100) { 127 | this.setData({ value: that.data.percent * that.data.max / 100 }) 128 | } else { 129 | this.setData({ value: value }) 130 | } 131 | 132 | let detail = e.changedTouches; 133 | let option = {}; 134 | this.triggerEvent('sliderTap', detail, option); 135 | } 136 | }, 137 | sliderStart: function (e) { 138 | if (!this.data.disabled) { 139 | var that = this 140 | let detail = e.changedTouches; 141 | let option = {}; 142 | var changedTouches = e.changedTouches[0]; 143 | this.setData({ isMonitoring: false }) 144 | if (this.data.sliderStartX == 0) { 145 | this.setData({ sliderStartX: changedTouches.pageX }) 146 | } 147 | if (this.data.sliderStartY == 0) { 148 | this.setData({ sliderStartY: changedTouches.pageY }) 149 | } 150 | if (this.data.startValue == 0) { 151 | var startValue = this.data.value 152 | this.setData({ startValue: startValue }) 153 | } 154 | this.triggerEvent('sliderStart', detail, option); 155 | } 156 | }, 157 | sliderChange: function (e) { 158 | if (!this.data.disabled) { 159 | var changedTouches = e.changedTouches[0]; 160 | // 当前相对值 161 | 162 | var value = 0 163 | if (this.data.orientation == 'landscape') { 164 | value = (changedTouches.pageX - this.data.sliderStartX) * this.data.screenRatio / this.data.width * this.data.max + Number(this.data.startValue) 165 | } else { 166 | value = (this.data.sliderStartY - changedTouches.pageY) * this.data.screenRatio / this.data.width * this.data.max + Number(this.data.startValue) 167 | } 168 | // 超出边界时 169 | if (value < 0) { 170 | value = 0 171 | } 172 | if(value > this.data.max) { 173 | value = this.data.max 174 | } 175 | this.setData ({ value: value }) 176 | let detail = e.changedTouches; 177 | let option = {}; 178 | this.triggerEvent('sliderChange', detail, option); 179 | } 180 | }, 181 | sliderEnd: function (e) { 182 | if (!this.data.disabled) { 183 | this.setData({ isMonitoring: true }) 184 | var that = this 185 | // 如果拉动的幅度比缓冲的值大，则调到缓冲值处播放 186 | if (this.data.percent <= this.data.value / this.data.max * 100) { 187 | this.setData({ value: that.data.percent * that.data.max / 100}) 188 | } 189 | let detail = e.changedTouches; 190 | let option = {}; 191 | this.triggerEvent('sliderEnd', detail, option); 192 | } 193 | }, 194 | sliderCancel: function (e) { 195 | if (!this.data.disabled) { 196 | var that = this 197 | this.setData({ isMonitoring: true }) 198 | if (this.data.percent <= this.data.value / this.data.max * 100) { 199 | this.setData({ value: that.data.percent * that.data.max / 100 }) 200 | } 201 | let detail = e.changedTouches; 202 | let option = {}; 203 | this.triggerEvent('sliderCancel', detail, option); 204 | } 205 | }, 206 | } 207 | }) 208 | -------------------------------------------------------------------------------- /component/wxzx-slider/wxzx-slider.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "wxzx-progress": "../wxzx-progress/wxzx-progress" 5 | } 6 | } -------------------------------------------------------------------------------- /component/wxzx-slider/wxzx-slider.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /component/wxzx-slider/wxzx-slider.wxss: -------------------------------------------------------------------------------- 1 | .slider { 2 | position: relative; 3 | } 4 | 5 | .slider__progress { 6 | position: absolute; 7 | } 8 | 9 | .slider__line { 10 | position: absolute; 11 | } 12 | 13 | .block { 14 | box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3); 15 | max-width: 40rpx; 16 | max-height: 40rpx; 17 | min-width: 20rpx; 18 | min-height: 20rpx; 19 | } 20 | 21 | .block__bg { 22 | display: flex; 23 | flex-direction: row; 24 | align-items: center; 25 | justify-content: center; 26 | position: absolute; 27 | } -------------------------------------------------------------------------------- /img/slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiemingdev/Slider/0f148c2b7ca6fed4ad03af01466a41b79a8d72b3/img/slider.png -------------------------------------------------------------------------------- /pages/audio/audio.js: -------------------------------------------------------------------------------- 1 | // pages/audio/audio.js 2 | const audioManager = wx.getBackgroundAudioManager() 3 | 4 | Page({ 5 | 6 | /** 7 | * 页面的初始数据 8 | */ 9 | data: { 10 | value: 0, 11 | percent: 0, 12 | max: 401, 13 | pass_time: '00:00', 14 | total_time: '06:41', 15 | pause: '暂停', 16 | pause_disable: true 17 | }, 18 | 19 | secondTransferTime: function (time) { 20 | if (time > 3600) { 21 | return [ 22 | parseInt(time / 60 / 60), 23 | parseInt(time / 60 % 60), 24 | parseInt(time % 60) 25 | ] 26 | .join(":") 27 | .replace(/\b(\d)\b/g, "0$1"); 28 | } else { 29 | return [ 30 | parseInt(time / 60 % 60), 31 | parseInt(time % 60) 32 | ] 33 | .join(":") 34 | .replace(/\b(\d)\b/g, "0$1"); 35 | } 36 | }, 37 | 38 | /** 39 | * 生命周期函数--监听页面加载 40 | */ 41 | onLoad: function (options) { 42 | var that = this 43 | this.wxzxSlider = this.selectComponent("#wxzxSlider"); 44 | audioManager.onTimeUpdate (function () { 45 | if (!that.wxzxSlider.properties.isMonitoring) { 46 | return 47 | } 48 | var currentTime = audioManager.currentTime.toFixed(0); 49 | if (currentTime > that.data.max) { 50 | currentTime = that.data.max; 51 | } 52 | var pass_time = that.secondTransferTime(currentTime); 53 | 54 | that.setData({ 55 | value: currentTime, 56 | pass_time: pass_time, 57 | percent: audioManager.buffered / audioManager.duration * 100, 58 | disabled: false 59 | }) 60 | }) 61 | 62 | audioManager.onWaiting (function () { 63 | that.setData ({ disabled: true }) 64 | }) 65 | 66 | audioManager.onEnded (function () { 67 | that.setData({ 68 | pause: '暂停', 69 | pause_disable: true, 70 | value: 0, 71 | pass_time: '00:00', 72 | percent: 0, 73 | disabled: true 74 | }) 75 | }) 76 | }, 77 | 78 | // 点击slider时调用 79 | sliderTap: function (e) { 80 | console.log("sliderTap") 81 | this.seek() 82 | }, 83 | 84 | // 开始滑动时 85 | sliderStart: function (e) { 86 | console.log("sliderStart") 87 | }, 88 | 89 | // 正在滑动 90 | sliderChange: function (e) { 91 | console.log("sliderChange") 92 | }, 93 | 94 | // 滑动结束 95 | sliderEnd: function (e) { 96 | console.log("sliderEnd") 97 | this.seek() 98 | }, 99 | 100 | // 滑动取消 （左滑时滑到上一页面或电话等情况） 101 | sliderCancel: function (e) { 102 | console.log("sliderCancel") 103 | this.seek() 104 | }, 105 | 106 | seek: function () { 107 | var value = this.wxzxSlider.properties.value 108 | console.log(value) 109 | var seek_time = value.toFixed(0); 110 | var pass_time = this.secondTransferTime(seek_time); 111 | this.setData({ 112 | pass_time: pass_time, 113 | }) 114 | audioManager.seek(Number(seek_time)); 115 | }, 116 | 117 | start: function () { 118 | audioManager.title = '此时此刻' 119 | audioManager.epname = '此时此刻' 120 | audioManager.singer = '许巍' 121 | audioManager.coverImgUrl = 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000' 122 | audioManager.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46' 123 | this.setData({ pause: '暂停', pause_disable: false }) 124 | }, 125 | 126 | pause: function (e) { 127 | if (audioManager.paused) { 128 | audioManager.play() 129 | this.setData({ pause: '暂停'}) 130 | } else { 131 | audioManager.pause() 132 | this.setData({ pause: '播放' }) 133 | } 134 | }, 135 | 136 | stop: function () { 137 | audioManager.stop() 138 | this.setData({ 139 | pause: '暂停', 140 | pause_disable: true, 141 | value: 0, 142 | pass_time: '00:00', 143 | percent: 0, 144 | disabled: true 145 | }) 146 | }, 147 | 148 | /** 149 | * 生命周期函数--监听页面初次渲染完成 150 | */ 151 | onReady: function () { 152 | 153 | }, 154 | 155 | /** 156 | * 生命周期函数--监听页面显示 157 | */ 158 | onShow: function () { 159 | 160 | }, 161 | 162 | 163 | }) -------------------------------------------------------------------------------- /pages/audio/audio.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "audio", 3 | "usingComponents": { 4 | "wxzx-slider": "../../component/wxzx-slider/wxzx-slider" 5 | } 6 | } -------------------------------------------------------------------------------- /pages/audio/audio.wxml: -------------------------------------------------------------------------------- 1 | 音频播放应用 2 | 3 | 4 | {{pass_time}} 5 | {{total_time}} 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /pages/audio/audio.wxss: -------------------------------------------------------------------------------- 1 | .slider_bg { 2 | width: 100%; 3 | height: 100rpx; 4 | display: flex; 5 | flex-direction: row; 6 | align-items: center; 7 | justify-content: center; 8 | } 9 | 10 | .time_view { 11 | width: 600rpx; 12 | height: 40rpx; 13 | display: flex; 14 | flex-direction: row; 15 | align-items: center; 16 | justify-content: space-between; 17 | margin-left: 75rpx; 18 | font-size: 36rpx; 19 | margin-top: 30rpx; 20 | color: #999; 21 | } -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | Page({ 2 | data: { 3 | 4 | }, 5 | 6 | gotoProgress: function (e) { 7 | wx.navigateTo({ 8 | url: '../progress/progress', 9 | }) 10 | }, 11 | 12 | 13 | gotoSlider: function (e) { 14 | wx.navigateTo({ 15 | url: '../slider/slider', 16 | }) 17 | }, 18 | 19 | gotoAudio: function (e) { 20 | wx.navigateTo({ 21 | url: '../audio/audio', 22 | }) 23 | }, 24 | 25 | gotoNewAudio: function () { 26 | wx.navigateTo({ 27 | url: '../newslider/newslider' 28 | }) 29 | } 30 | }) 31 | -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jiemingdev/Slider/0f148c2b7ca6fed4ad03af01466a41b79a8d72b3/pages/index/index.wxss -------------------------------------------------------------------------------- /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/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志" 3 | } -------------------------------------------------------------------------------- /pages/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{index + 1}}. {{log}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /pages/newslider/newslider.js: -------------------------------------------------------------------------------- 1 | // pages/newslider/newslider.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | this.wxzxSlider1 = this.selectComponent("#wxzxSlider1"); 16 | this.wxzxSlider2 = this.selectComponent("#wxzxSlider2"); 17 | this.wxzxSlider3 = this.selectComponent("#wxzxSlider3"); 18 | this.wxzxSlider4 = this.selectComponent("#wxzxSlider4"); 19 | this.wxzxSlider5 = this.selectComponent("#wxzxSlider5"); 20 | this.wxzxSlider6 = this.selectComponent("#wxzxSlider6"); 21 | }, 22 | 23 | // 点击slider时调用 24 | sliderTap: function (e) { 25 | console.log(e) 26 | this.consoleValue(e) 27 | }, 28 | 29 | // 开始滑动时 30 | sliderStart: function (e) { 31 | // console.log(e) 32 | }, 33 | 34 | // 正在滑动 35 | sliderChange: function (e) { 36 | // console.log(e) 37 | }, 38 | 39 | // 滑动结束 40 | sliderEnd: function (e) { 41 | console.log(e) 42 | this.consoleValue(e) 43 | }, 44 | 45 | // 滑动取消 （左滑时滑到上一页面或电话等情况） 46 | sliderCancel: function (e) { 47 | console.log(e) 48 | this.consoleValue(e) 49 | }, 50 | 51 | consoleValue: function (e) { 52 | if (e.currentTarget.id == 'wxzxSlider1') { 53 | console.log("slider1 value = " + this.wxzxSlider1.properties.value) 54 | } else if (e.currentTarget.id == 'wxzxSlider2') { 55 | console.log("slider2 value = " + this.wxzxSlider2.properties.value) 56 | } else if (e.currentTarget.id == 'wxzxSlider3') { 57 | console.log("slider3 value = " + this.wxzxSlider3.properties.value) 58 | } else if (e.currentTarget.id == 'wxzxSlider4') { 59 | console.log("slider4 value = " + this.wxzxSlider4.properties.value) 60 | } else if (e.currentTarget.id == 'wxzxSlider5') { 61 | console.log("slider5 value = " + this.wxzxSlider5.properties.value) 62 | } else if (e.currentTarget.id == 'wxzxSlider6') { 63 | console.log("slider6 value = " + this.wxzxSlider6.properties.value) 64 | } 65 | }, 66 | 67 | /** 68 | * 生命周期函数--监听页面初次渲染完成 69 | */ 70 | onReady: function () { 71 | 72 | }, 73 | 74 | /** 75 | * 生命周期函数--监听页面显示 76 | */ 77 | onShow: function () { 78 | 79 | }, 80 | 81 | /** 82 | * 生命周期函数--监听页面隐藏 83 | */ 84 | onHide: function () { 85 | 86 | }, 87 | 88 | /** 89 | * 生命周期函数--监听页面卸载 90 | */ 91 | onUnload: function () { 92 | 93 | }, 94 | 95 | /** 96 | * 页面相关事件处理函数--监听用户下拉动作 97 | */ 98 | onPullDownRefresh: function () { 99 | 100 | }, 101 | 102 | /** 103 | * 页面上拉触底事件的处理函数 104 | */ 105 | onReachBottom: function () { 106 | 107 | }, 108 | 109 | /** 110 | * 用户点击右上角分享 111 | */ 112 | onShareAppMessage: function () { 113 | 114 | } 115 | }) -------------------------------------------------------------------------------- /pages/newslider/newslider.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "newslider", 3 | "usingComponents": { 4 | "wxzx-slider": "../../component/wxzx-slider/wxzx-slider" 5 | } 6 | } -------------------------------------------------------------------------------- /pages/newslider/newslider.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 音效增强器 5 | 6 | 7 | 8 | 9 | +10 dB 10 | 0 dB 11 | -10 dB 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 60Hz 23 | 230Hz 24 | 910Hz 25 | 4kHz 26 | 14kHz 27 | 28 | 29 | 30 | 31 | 环绕声 32 | 33 | 34 | -------------------------------------------------------------------------------- /pages/newslider/newslider.wxss: -------------------------------------------------------------------------------- 1 | .sound_effect_view { 2 | width: 100%; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | } 7 | 8 | .portrait_slider { 9 | margin-top: 30rpx; 10 | width: 600rpx; 11 | height: 100%; 12 | display: flex; 13 | flex-direction: row; 14 | align-items: center; 15 | justify-content: space-between; 16 | font-size: 30rpx; 17 | color: gray; 18 | } 19 | 20 | .title_view1 { 21 | width: 700rpx; 22 | margin-left: 25rpx; 23 | display: flex; 24 | flex-direction: row; 25 | align-items: center; 26 | color: #000; 27 | font-size: 40rpx; 28 | } 29 | 30 | .db_view { 31 | height: 420rpx; 32 | display: flex; 33 | flex-direction: column; 34 | align-items: center; 35 | justify-content: space-between; 36 | } 37 | 38 | .triangle { 39 | width:0; 40 | height:0; 41 | border-width:16rpx 16rpx 0; 42 | border-style:solid; 43 | border-color:gray transparent transparent;/*灰 透明 透明 */ 44 | margin-left: 50rpx; 45 | position:relative; 46 | } 47 | 48 | .hz_view { 49 | margin-top: 20rpx; 50 | width: 500rpx; 51 | margin-left: 120rpx; 52 | display: flex; 53 | flex-direction: row; 54 | align-items: center; 55 | justify-content: space-between; 56 | font-size: 30rpx; 57 | color: gray; 58 | } 59 | 60 | .landspace_slider { 61 | margin-top: 100rpx; 62 | width: 650rpx; 63 | height: 100%; 64 | margin-left: 50rpx; 65 | display: flex; 66 | flex-direction: row; 67 | align-items: center; 68 | justify-content: space-between; 69 | } 70 | 71 | .title_view2 { 72 | color: gray; 73 | font-size: 40rpx; 74 | } 75 | -------------------------------------------------------------------------------- /pages/progress/progress.js: -------------------------------------------------------------------------------- 1 | // pages/progress/progress.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | /** 19 | * 生命周期函数--监听页面初次渲染完成 20 | */ 21 | onReady: function () { 22 | 23 | }, 24 | 25 | /** 26 | * 生命周期函数--监听页面显示 27 | */ 28 | onShow: function () { 29 | 30 | }, 31 | 32 | /** 33 | * 生命周期函数--监听页面隐藏 34 | */ 35 | onHide: function () { 36 | 37 | }, 38 | 39 | /** 40 | * 生命周期函数--监听页面卸载 41 | */ 42 | onUnload: function () { 43 | 44 | }, 45 | 46 | /** 47 | * 页面相关事件处理函数--监听用户下拉动作 48 | */ 49 | onPullDownRefresh: function () { 50 | 51 | }, 52 | 53 | /** 54 | * 页面上拉触底事件的处理函数 55 | */ 56 | onReachBottom: function () { 57 | 58 | }, 59 | 60 | /** 61 | * 用户点击右上角分享 62 | */ 63 | onShareAppMessage: function () { 64 | 65 | } 66 | }) -------------------------------------------------------------------------------- /pages/progress/progress.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "progress", 3 | "usingComponents": { 4 | "wxzx-progress": "../../component/wxzx-progress/wxzx-progress" 5 | } 6 | 7 | } -------------------------------------------------------------------------------- /pages/progress/progress.wxml: -------------------------------------------------------------------------------- 1 | 2 | 默认 3 | 4 | 5 | 百分比 percent='90' 6 | 7 | 8 | 单色 active-color='#ff6600' 9 | 10 | 11 | 渐变色 active-color='#ff6600, #000000' 12 | 13 | 14 | 设置宽度 stroke-width='20',圆角radius='10' 15 | 16 | 17 | 设置背景色 background-color='#3232de' 18 | 19 | 20 | 设置宽度 width='600' 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /pages/progress/progress.wxss: -------------------------------------------------------------------------------- 1 | .bg { 2 | width: 100%; 3 | height: 900rpx; 4 | display: flex; 5 | flex-direction: row; 6 | align-items: center; 7 | justify-content: space-around; 8 | } -------------------------------------------------------------------------------- /pages/slider/slider.js: -------------------------------------------------------------------------------- 1 | // pages/slider/slider.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | disabled: false 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | 16 | }, 17 | 18 | // 点击slider时调用 19 | sliderTap: function (e) { 20 | console.log("sliderTap") 21 | }, 22 | 23 | // 开始滑动时 24 | sliderStart: function (e) { 25 | console.log("sliderStart") 26 | }, 27 | 28 | // 正在滑动 29 | sliderChange: function (e) { 30 | console.log("sliderChange") 31 | }, 32 | 33 | // 滑动结束 34 | sliderEnd: function (e) { 35 | console.log("sliderEnd") 36 | }, 37 | 38 | // 滑动取消 （左滑时滑到上一页面或电话等情况） 39 | sliderCancel: function (e) { 40 | console.log("sliderCancel") 41 | }, 42 | 43 | /** 44 | * 生命周期函数--监听页面初次渲染完成 45 | */ 46 | onReady: function () { 47 | 48 | }, 49 | 50 | /** 51 | * 生命周期函数--监听页面显示 52 | */ 53 | onShow: function () { 54 | 55 | }, 56 | 57 | /** 58 | * 生命周期函数--监听页面隐藏 59 | */ 60 | onHide: function () { 61 | 62 | }, 63 | 64 | /** 65 | * 生命周期函数--监听页面卸载 66 | */ 67 | onUnload: function () { 68 | 69 | }, 70 | 71 | /** 72 | * 页面相关事件处理函数--监听用户下拉动作 73 | */ 74 | onPullDownRefresh: function () { 75 | 76 | }, 77 | 78 | /** 79 | * 页面上拉触底事件的处理函数 80 | */ 81 | onReachBottom: function () { 82 | 83 | }, 84 | 85 | /** 86 | * 用户点击右上角分享 87 | */ 88 | onShareAppMessage: function () { 89 | 90 | } 91 | }) -------------------------------------------------------------------------------- /pages/slider/slider.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "slider", 3 | "usingComponents": { 4 | "wxzx-slider": "../../component/wxzx-slider/wxzx-slider" 5 | } 6 | } -------------------------------------------------------------------------------- /pages/slider/slider.wxml: -------------------------------------------------------------------------------- 1 | 2 | 静态slider 3 | 4 | 设置宽度stroke-width='20'和圆角radius='10' 5 | 6 | 7 | 8 | 9 | 默认 10 | 11 | 12 | 13 | 14 | 设置缓冲条 percent='60' 15 | 16 | 17 | 18 | 19 | 20 | 21 | 设置宽度 width='600' 并设置slider局屏幕左侧距离slider-left='75' 22 | 23 | 24 | 25 | 26 | 设置当前取值value='40'和最大值max='100' 27 | 28 | 29 | 30 | 31 | 设置前景色 active-color='#ff6600' 32 | 33 | 34 | 35 | 36 | 设置缓冲条颜色 buffer-color='#51C332' 37 | 38 | 39 | 40 | 41 | 设置背景色 background-color='#51C332' 42 | 43 | 44 | 45 | 46 | 47 | 48 | 设置滑块大小 [20, 40] 默认为40 49 | 50 | 51 | 52 | 53 | 设置滑块颜色 54 | 55 | 56 | 57 | 58 | 设置图片滑块blockSrc='../../img/slider.png' 宽度blockImageWidth='54' 高度blockImageHeight='54' 59 | 60 | 61 | 62 | 63 | 动态slider 64 | 设置slider距离屏幕左边距离，默认为0 65 | 66 | 67 | 68 | 69 | disabled='true' 禁用滑动 默认为false 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /pages/slider/slider.wxss: -------------------------------------------------------------------------------- 1 | .slider_bg { 2 | width: 100%; 3 | height: 100rpx; 4 | display: flex; 5 | flex-direction: row; 6 | align-items: center; 7 | justify-content: center; 8 | } -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "setting": { 4 | "urlCheck": true, 5 | "es6": true, 6 | "postcss": true, 7 | "minified": true, 8 | "newFeature": true 9 | }, 10 | "compileType": "miniprogram", 11 | "libVersion": "1.9.93", 12 | "appid": "wx421bde31246f6c15", 13 | "projectname": "Slider", 14 | "condition": { 15 | "search": { 16 | "current": -1, 17 | "list": [] 18 | }, 19 | "conversation": { 20 | "current": -1, 21 | "list": [] 22 | }, 23 | "game": { 24 | "currentL": -1, 25 | "list": [] 26 | }, 27 | "miniprogram": { 28 | "current": -1, 29 | "list": [] 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------