├── README.md ├── app.js ├── app.json ├── app.wxss ├── data └── images │ ├── audio-detail.png │ ├── audio-list.png │ ├── comment.png │ ├── favourite.png │ ├── participating.png │ ├── video-detail.png │ └── video-list.png ├── images ├── contact.png ├── like.png ├── pause.png ├── recording.png ├── red-packet.png ├── share.png ├── start.png ├── voice.gif └── voice.png ├── pages ├── audio │ ├── audio-detail │ │ ├── audio-detail.js │ │ ├── audio-detail.json │ │ ├── audio-detail.wxml │ │ └── audio-detail.wxss │ ├── audio-list │ │ ├── audio-list.js │ │ ├── audio-list.json │ │ ├── audio-list.wxml │ │ └── audio-list.wxss │ ├── audio.wxss │ └── comment │ │ ├── comment.js │ │ ├── comment.json │ │ ├── comment.wxml │ │ └── comment.wxss ├── data-value │ ├── data-value.js │ ├── data-value.json │ ├── data-value.wxml │ └── data-value.wxss ├── favorite │ ├── favorite.js │ ├── favorite.json │ ├── favorite.wxml │ ├── favorite.wxss │ └── image │ │ ├── fav.png │ │ ├── fav_on.png │ │ └── mi.jpg ├── index │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss ├── participating │ ├── participating.js │ ├── participating.json │ ├── participating.wxml │ └── participating.wxss └── video │ ├── video-detail │ ├── video-detail.js │ ├── video-detail.json │ ├── video-detail.wxml │ └── video-detail.wxss │ ├── video-list │ ├── video-list.js │ ├── video-list.json │ ├── video-list.wxml │ └── video-list.wxss │ └── video.wxss ├── project.config.json └── style └── public.wxss /README.md: -------------------------------------------------------------------------------- 1 | # miniProgram-tmp 2 | 我的微信小程序模板库（My WeChat miniProgram templates.） 3 | ## data 的取值和赋值（data-value) 4 | - 网址：[点击前往GitHub地址](https://github.com/ideshun/miniProgram-tmp/tree/master/pages/data-value "GitHub地址") 5 | - 教程：[点击前往我的博客](https://www.w3h5.com/post/156.html "我的博客地址") 6 | 7 | ## 正在参与的人数（participating） 8 | - 网址： 9 | [点击前往GitHub地址](https://github.com/ideshun/miniProgram-tmp/tree/master/pages/participating "GitHub地址") 10 | - 预览图： 11 | ![正在参与的人数（participating）](https://github.com/ideshun/miniProgram-tmp/blob/master/data/images/participating.png) 12 | 13 | ## 语音作品列表（audio-list） 14 | - 网址： 15 | [点击前往GitHub地址](https://github.com/ideshun/miniProgram-tmp/tree/master/pages/audio/audio-list "GitHub地址") 16 | - 预览图： 17 | ![语音作品列表（audio-list）](https://github.com/ideshun/miniProgram-tmp/blob/master/data/images/audio-list.png) 18 | 19 | ## 语音作品详情页（audio-detail） 20 | - 网址： 21 | [点击前往GitHub地址](https://github.com/ideshun/miniProgram-tmp/tree/master/pages/audio/audio-detail "GitHub地址") 22 | - 预览图： 23 | ![语音作品详情页（audio-detail）](https://github.com/ideshun/miniProgram-tmp/blob/master/data/images/audio-detail.png) 24 | 25 | ## 评论详情页（comment） 26 | - 网址： 27 | [点击前往GitHub地址](https://github.com/ideshun/miniProgram-tmp/tree/master/pages/audio/comment "GitHub地址") 28 | - 预览图： 29 | ![评论详情页（comment）](https://github.com/ideshun/miniProgram-tmp/blob/master/data/images/comment.png) 30 | 31 | ## 列表点赞（favourite） 32 | - 网址： 33 | [点击前往GitHub地址](https://github.com/ideshun/miniProgram-tmp/tree/master/pages/favorite "GitHub地址") 34 | - 预览图： 35 | ![评论详情页（favourite）](https://github.com/ideshun/miniProgram-tmp/blob/master/data/images/favourite.png) -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/app.js -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index", 4 | "pages/data-value/data-value", 5 | "pages/participating/participating", 6 | "pages/audio/audio-list/audio-list", 7 | "pages/audio/audio-detail/audio-detail", 8 | "pages/audio/comment/comment", 9 | "pages/video/video-list/video-list", 10 | "pages/video/video-detail/video-detail", 11 | "pages/favorite/favorite" 12 | ], 13 | "window": { 14 | "navigationBarTextStyle": "black", 15 | "navigationBarTitleText": "Deshun for 小程序", 16 | "navigationBarBackgroundColor": "#f8f8f8", 17 | "backgroundColor": "#f8f8f8" 18 | } 19 | } -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | @import "/style/public.wxss"; -------------------------------------------------------------------------------- /data/images/audio-detail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/data/images/audio-detail.png -------------------------------------------------------------------------------- /data/images/audio-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/data/images/audio-list.png -------------------------------------------------------------------------------- /data/images/comment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/data/images/comment.png -------------------------------------------------------------------------------- /data/images/favourite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/data/images/favourite.png -------------------------------------------------------------------------------- /data/images/participating.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/data/images/participating.png -------------------------------------------------------------------------------- /data/images/video-detail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/data/images/video-detail.png -------------------------------------------------------------------------------- /data/images/video-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/data/images/video-list.png -------------------------------------------------------------------------------- /images/contact.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/images/contact.png -------------------------------------------------------------------------------- /images/like.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/images/like.png -------------------------------------------------------------------------------- /images/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/images/pause.png -------------------------------------------------------------------------------- /images/recording.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/images/recording.png -------------------------------------------------------------------------------- /images/red-packet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/images/red-packet.png -------------------------------------------------------------------------------- /images/share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/images/share.png -------------------------------------------------------------------------------- /images/start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/images/start.png -------------------------------------------------------------------------------- /images/voice.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/images/voice.gif -------------------------------------------------------------------------------- /images/voice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/images/voice.png -------------------------------------------------------------------------------- /pages/audio/audio-detail/audio-detail.js: -------------------------------------------------------------------------------- 1 | // pages/voice-list/voice-list.js 2 | const innerAudioContext = wx.createInnerAudioContext(); 3 | Page({ 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | aPlay: false, 9 | rotateNum: 0, 10 | playProgress: 0, 11 | currentTime: '', 12 | }, 13 | clickPlay: function() { 14 | innerAudioContext.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46' 15 | let that = this; 16 | let play = that.data.aPlay; 17 | if (play) { 18 | // 暂停 19 | innerAudioContext.pause() 20 | // 监听暂停 21 | innerAudioContext.onPause(() => { 22 | that.setData({ 23 | aPlay: false, 24 | }) 25 | console.log('暂停播放'); 26 | // 清空定时，取消旋转 27 | clearInterval(that.setTimer); 28 | }) 29 | } else { 30 | innerAudioContext.play() 31 | innerAudioContext.onPlay(() => { 32 | that.setData({ 33 | aPlay: true, 34 | }) 35 | console.log('开始播放'); 36 | // 清空定时 37 | clearInterval(that.setTimer); 38 | // 头像旋转 39 | that.setTimer = setInterval(() => { 40 | let rotate = that.data.rotateNum; 41 | let aProgress = (innerAudioContext.currentTime / innerAudioContext.duration) * 100; 42 | let playTime = innerAudioContext.duration - innerAudioContext.currentTime; 43 | let min = parseInt(playTime / 60); 44 | let sec = parseInt(playTime % 60); 45 | if (sec <= 9) { 46 | sec = "0" + sec; 47 | } 48 | if (min <= 9) { 49 | min = "0" + min; 50 | } 51 | rotate++; 52 | that.setData({ 53 | rotateNum: rotate, 54 | playProgress: aProgress, 55 | currentTime: min + ":" + sec, 56 | }) 57 | 58 | }, 40) 59 | }) 60 | } 61 | // 监听正常播放结束 62 | innerAudioContext.onEnded(() => { 63 | var that = this; 64 | clearInterval(that.setTimer); 65 | that.setData({ 66 | rotateNum: 0, 67 | aPlay: false, 68 | playProgress: 0, 69 | }) 70 | console.log("正常播放结束") 71 | }) 72 | }, 73 | // 长按停止 74 | audioStop: function() { 75 | innerAudioContext.stop() 76 | innerAudioContext.onStop(() => { 77 | var that = this; 78 | clearInterval(that.setTimer); 79 | that.setData({ 80 | rotateNum: 0, 81 | aPlay: false, 82 | playProgress: 0, 83 | }) 84 | console.log("停止成功") 85 | }) 86 | }, 87 | // 改变进度 88 | // changeProgress: function (e) { 89 | // let that = this; 90 | // let seek = innerAudioContext.duration; 91 | // innerAudioContext.seek(innerAudioContext.duration * (e.detail.value / 100)) 92 | // that.setData({ 93 | // rotateNum: e.detail.value, 94 | // playProgress: e.detail.value, 95 | // }) 96 | // }, 97 | /** 98 | * 生命周期函数--监听页面加载 99 | */ 100 | onLoad: function(options) { 101 | 102 | }, 103 | 104 | /** 105 | * 生命周期函数--监听页面初次渲染完成 106 | */ 107 | onReady: function() { 108 | 109 | }, 110 | 111 | /** 112 | * 生命周期函数--监听页面显示 113 | */ 114 | onShow: function() { 115 | 116 | }, 117 | 118 | /** 119 | * 生命周期函数--监听页面隐藏 120 | */ 121 | onHide: function() { 122 | 123 | }, 124 | 125 | /** 126 | * 生命周期函数--监听页面卸载 127 | */ 128 | onUnload: function() { 129 | 130 | }, 131 | 132 | /** 133 | * 页面相关事件处理函数--监听用户下拉动作 134 | */ 135 | onPullDownRefresh: function() { 136 | 137 | }, 138 | 139 | /** 140 | * 页面上拉触底事件的处理函数 141 | */ 142 | onReachBottom: function() { 143 | 144 | }, 145 | 146 | /** 147 | * 用户点击右上角分享 148 | */ 149 | onShareAppMessage: function() { 150 | 151 | } 152 | }) -------------------------------------------------------------------------------- /pages/audio/audio-detail/audio-detail.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/audio/audio-detail/audio-detail.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 图兔兔吐突突 8 | 11/09 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 不做不可及的梦，这使我的睡眠安恬。避开无事时过分热络的友谊，这使我少些负担和承诺。不说无谓的闲言，这使我觉得清畅 19 | 20 | 21 | {{currentTime}} 22 | 23 | 27 | 28 | 29 | 30 | 31 | 32 | 5 33 | 34 | 35 | 36 | 5 37 | 38 | 39 | 40 | 5 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 评论 51 | 最热 52 | 53 | 54 | 55 | 56 | 60 | 61 | 62 | 63 | 不说不刻字母，这时候睡眠情况，低头是石鼓的热事一，这时候少妻夫留守，不说无谓的闲言，只是我觉得，请茶。 64 | 65 | 66 | 67 | 19" 68 | 69 | 70 | 71 | 白炽灯 回复 王美丽：好听吗？ 72 | 73 | 74 | 王美丽：好听 75 | 76 | 查看3条评论 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 发表 86 | -------------------------------------------------------------------------------- /pages/audio/audio-detail/audio-detail.wxss: -------------------------------------------------------------------------------- 1 | /* pages/audio/audio-detail/audio-detail.wxss */ 2 | @import "../audio.wxss"; 3 | 4 | .audio-bg { 5 | width: 750rpx; 6 | } 7 | 8 | .audio-user { 9 | padding: 20rpx 20rpx 10rpx; 10 | } 11 | 12 | .audio-item { 13 | text-align: center; 14 | padding-top: 80rpx; 15 | } 16 | 17 | .audio-btn-box { 18 | display: inline-block; 19 | } 20 | 21 | .audio-text { 22 | padding: 20rpx 30rpx 80rpx; 23 | } 24 | 25 | .av-inte-box { 26 | padding: 30rpx 50rpx 20rpx; 27 | border-bottom: 15rpx solid #f2f2f2; 28 | } 29 | 30 | /* 评论区 */ 31 | 32 | .comment-container { 33 | padding-bottom: 110rpx; 34 | } 35 | 36 | .comment-topBar { 37 | font-size: 14px; 38 | padding: 20rpx; 39 | border-bottom: 2rpx solid #f2f2f2; 40 | } 41 | 42 | .comment-sort { 43 | float: right; 44 | } 45 | 46 | .comment-item { 47 | padding: 20rpx; 48 | border-bottom: 2rpx solid #f2f2f2; 49 | } 50 | 51 | .comm-avatar { 52 | width: 60rpx; 53 | height: 60rpx; 54 | border-radius: 50%; 55 | } 56 | 57 | .comm-user-info { 58 | display: inline-block; 59 | line-height: 30rpx; 60 | vertical-align: top; 61 | margin-left: 20rpx; 62 | } 63 | 64 | .comm-user-name { 65 | font-size: 12px; 66 | margin-top: 5rpx; 67 | } 68 | 69 | .comm-user-date { 70 | font-size: 11px; 71 | color: gray; 72 | } 73 | 74 | .comm-info { 75 | font-size: 12px; 76 | padding-left: 80rpx; 77 | } 78 | 79 | .comm-audio-box { 80 | width: 350rpx; 81 | height: 60rpx; 82 | margin: 20rpx 0 5rpx; 83 | box-sizing: border-box; 84 | padding: 0 10rpx; 85 | border-radius: 30rpx; 86 | background: linear-gradient(to right, #1e90ff, #436eee); 87 | } 88 | 89 | .comm-audio-btn { 90 | width: 30rpx; 91 | height: 30rpx; 92 | padding: 15rpx; 93 | } 94 | 95 | .comm-audio-time { 96 | color: #fff; 97 | float: right; 98 | padding: 15rpx 10rpx; 99 | } 100 | 101 | .comm-inBox { 102 | border-radius: 10rpx; 103 | margin-top: 15rpx; 104 | padding: 10rpx 20rpx; 105 | background: #f2f2f2; 106 | } 107 | 108 | .inBox-info { 109 | margin: 8rpx 0; 110 | } 111 | 112 | .inBox-user-name { 113 | color: #1e90ff; 114 | } 115 | 116 | .inBox-more { 117 | margin: 8rpx 0; 118 | color: #1e90ff; 119 | } 120 | 121 | /* 发评论 */ 122 | 123 | .comment-publish { 124 | position: fixed; 125 | box-sizing: border-box; 126 | bottom: 0; 127 | left: 0; 128 | border-top: 1rpx solid #f2f2f2; 129 | width: 100%; 130 | background: #fff; 131 | padding: 10rpx 20rpx; 132 | } 133 | 134 | .comment-publish image { 135 | width: 50rpx; 136 | height: 50rpx; 137 | margin-right: 15rpx; 138 | } 139 | 140 | .comment-publish input { 141 | display: inline-block; 142 | width: 500rpx; 143 | height: 52rpx; 144 | line-height: 52rpx; 145 | border: 2rpx solid #f2f2f2; 146 | border-radius: 10rpx; 147 | padding: 0 10rpx; 148 | font-size: 13px; 149 | } 150 | 151 | .publish-btn { 152 | display: inline-block; 153 | vertical-align: middle; 154 | float: right; 155 | width: 100rpx; 156 | height: 55rpx; 157 | line-height: 55rpx; 158 | border-radius: 10rpx; 159 | background: #1e90ff; 160 | text-align: center; 161 | font-size: 14px; 162 | color: #fff; 163 | } 164 | -------------------------------------------------------------------------------- /pages/audio/audio-list/audio-list.js: -------------------------------------------------------------------------------- 1 | // pages/voice-list/voice-list.js 2 | const innerAudioContext = wx.createInnerAudioContext(); 3 | Page({ 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | aPlay: false, 9 | rotateNum: 0, 10 | playProgress: 0, 11 | currentTime: '', 12 | }, 13 | clickPlay: function() { 14 | innerAudioContext.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46' 15 | let that = this; 16 | let play = that.data.aPlay; 17 | if (play) { 18 | // 暂停 19 | innerAudioContext.pause() 20 | // 监听暂停 21 | innerAudioContext.onPause(() => { 22 | that.setData({ 23 | aPlay: false, 24 | }) 25 | console.log('暂停播放'); 26 | // 清空定时，取消旋转 27 | clearInterval(that.setTimer); 28 | }) 29 | } else { 30 | innerAudioContext.play() 31 | innerAudioContext.onPlay(() => { 32 | that.setData({ 33 | aPlay: true, 34 | }) 35 | console.log('开始播放'); 36 | // 清空定时 37 | clearInterval(that.setTimer); 38 | // 头像旋转 39 | that.setTimer = setInterval(() => { 40 | let rotate = that.data.rotateNum; 41 | let aProgress = (innerAudioContext.currentTime / innerAudioContext.duration) * 100; 42 | let playTime = innerAudioContext.duration - innerAudioContext.currentTime; 43 | let min = parseInt(playTime / 60); 44 | let sec = parseInt(playTime % 60); 45 | if(sec<=9){ 46 | sec="0"+sec; 47 | } 48 | if (min <= 9) { 49 | min = "0" + min; 50 | } 51 | rotate++; 52 | that.setData({ 53 | rotateNum: rotate, 54 | playProgress: aProgress, 55 | currentTime: min+":"+sec, 56 | }) 57 | }, 40) 58 | }) 59 | } 60 | // 监听正常播放结束 61 | innerAudioContext.onEnded(() => { 62 | var that = this; 63 | clearInterval(that.setTimer); 64 | that.setData({ 65 | rotateNum: 0, 66 | aPlay: false, 67 | playProgress:0, 68 | }) 69 | console.log("正常播放结束") 70 | }) 71 | }, 72 | // 长按停止 73 | audioStop: function() { 74 | innerAudioContext.stop() 75 | innerAudioContext.onStop(() => { 76 | var that = this; 77 | clearInterval(that.setTimer); 78 | that.setData({ 79 | rotateNum: 0, 80 | aPlay: false, 81 | playProgress: 0, 82 | }) 83 | console.log("停止成功") 84 | }) 85 | }, 86 | // 改变进度 87 | // changeProgress: function (e) { 88 | // let that = this; 89 | // let seek = innerAudioContext.duration; 90 | // innerAudioContext.seek(innerAudioContext.duration * (e.detail.value / 100)) 91 | // that.setData({ 92 | // rotateNum: e.detail.value, 93 | // playProgress: e.detail.value, 94 | // }) 95 | // }, 96 | /** 97 | * 生命周期函数--监听页面加载 98 | */ 99 | onLoad: function(options) { 100 | 101 | }, 102 | 103 | /** 104 | * 生命周期函数--监听页面初次渲染完成 105 | */ 106 | onReady: function() { 107 | 108 | }, 109 | 110 | /** 111 | * 生命周期函数--监听页面显示 112 | */ 113 | onShow: function() { 114 | 115 | }, 116 | 117 | /** 118 | * 生命周期函数--监听页面隐藏 119 | */ 120 | onHide: function() { 121 | 122 | }, 123 | 124 | /** 125 | * 生命周期函数--监听页面卸载 126 | */ 127 | onUnload: function() { 128 | 129 | }, 130 | 131 | /** 132 | * 页面相关事件处理函数--监听用户下拉动作 133 | */ 134 | onPullDownRefresh: function() { 135 | 136 | }, 137 | 138 | /** 139 | * 页面上拉触底事件的处理函数 140 | */ 141 | onReachBottom: function() { 142 | 143 | }, 144 | 145 | /** 146 | * 用户点击右上角分享 147 | */ 148 | onShareAppMessage: function() { 149 | 150 | } 151 | }) -------------------------------------------------------------------------------- /pages/audio/audio-list/audio-list.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/audio/audio-list/audio-list.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 图兔兔吐突突 10 | 11/09 11 | 12 | 13 | 14 | 15 | 16 | 不做不可及的梦，这使我的睡眠安恬。避开无事时过分热络的友谊，这使我少些负担和承诺。不说无谓的闲言，这使我觉得清畅 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | {{currentTime}} 25 | 26 | 30 | 31 | 32 | 33 | 5 34 | 5 35 | 5 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /pages/audio/audio-list/audio-list.wxss: -------------------------------------------------------------------------------- 1 | /* pages/audio-list/audio-list.wxss */ 2 | @import "../audio.wxss"; 3 | 4 | .avlist-item { 5 | padding: 20rpx; 6 | background: #fff; 7 | border-bottom: 15rpx solid #f2f2f2; 8 | } 9 | 10 | .audio-item { 11 | height: 200rpx; 12 | border-radius: 10rpx; 13 | } 14 | 15 | .audio-user { 16 | margin-bottom: 10rpx; 17 | } 18 | 19 | .audio-bg { 20 | width: 710rpx; 21 | } 22 | 23 | .audio-text { 24 | float: left; 25 | width: 450rpx; 26 | overflow: hidden; 27 | text-overflow: ellipsis; 28 | display: -webkit-box; 29 | -webkit-box-orient: vertical; 30 | -webkit-line-clamp: 3; 31 | word-break: break-all; 32 | } 33 | 34 | .audio-btn-box { 35 | float: right; 36 | } 37 | 38 | -------------------------------------------------------------------------------- /pages/audio/audio.wxss: -------------------------------------------------------------------------------- 1 | .avlist-item { 2 | padding: 20rpx; 3 | background: #fff; 4 | border-bottom: 15rpx solid #f2f2f2; 5 | } 6 | 7 | .avuser-avatar { 8 | width: 80rpx; 9 | height: 80rpx; 10 | border-radius: 50%; 11 | } 12 | 13 | .avuser-info { 14 | display: inline-block; 15 | vertical-align: top; 16 | margin-left: 20rpx; 17 | } 18 | 19 | .avuser-name { 20 | font-size: 14px; 21 | margin-top: 6rpx; 22 | color: #666; 23 | } 24 | 25 | .avuser-time { 26 | font-size: 12px; 27 | color: gray; 28 | } 29 | 30 | 31 | .avuser-avatar { 32 | width: 80rpx; 33 | height: 80rpx; 34 | border-radius: 50%; 35 | } 36 | 37 | .avuser-info { 38 | display: inline-block; 39 | vertical-align: top; 40 | margin-left: 20rpx; 41 | } 42 | 43 | .avuser-name { 44 | font-size: 14px; 45 | margin-top: 6rpx; 46 | color: #666; 47 | } 48 | 49 | .avuser-time { 50 | font-size: 12px; 51 | color: gray; 52 | } 53 | 54 | .audio-item { 55 | position: relative; 56 | padding: 30rpx; 57 | background-size: cover; 58 | background-position: center; 59 | overflow: hidden; 60 | background: #999; 61 | } 62 | 63 | .audio-bg { 64 | position: absolute; 65 | left: 0; 66 | top: 0; 67 | opacity: 0.5; 68 | } 69 | 70 | .audio-btn-box { 71 | position: relative; 72 | z-index: 9; 73 | } 74 | 75 | .audio-text { 76 | position: relative; 77 | font-size: 12px; 78 | line-height: 42rpx; 79 | color: #fff; 80 | z-index: 9; 81 | } 82 | 83 | .audio-img { 84 | width: 134rpx; 85 | border-radius: 50%; 86 | } 87 | 88 | .audio-btn { 89 | position: absolute; 90 | top: 40rpx; 91 | left: 40rpx; 92 | width: 50rpx; 93 | height: 50rpx; 94 | border-radius: 50%; 95 | background: rgba(0, 0, 0, 0.5); 96 | border: 4rpx solid #fff; 97 | z-index: 9; 98 | } 99 | 100 | .audio-progress { 101 | position: absolute; 102 | width: 650rpx; 103 | bottom: 30rpx; 104 | } 105 | 106 | .audio-progress progress { 107 | display: inline-block; 108 | width: 520rpx; 109 | } 110 | 111 | .audio-progress slider { 112 | margin: 0 10rpx; 113 | display: inline-block; 114 | width: 520rpx; 115 | opacity: 0.6; 116 | } 117 | 118 | .audio-progress text { 119 | display: inline-block; 120 | font-size: 14px; 121 | color: #fff; 122 | position: relative; 123 | top: 8rpx; 124 | left: 10rpx; 125 | } 126 | 127 | .av-inte-box { 128 | display: flex; 129 | justify-content: space-between; 130 | padding: 20rpx 20rpx 0; 131 | font-size: 14px; 132 | color: #707070; 133 | } 134 | 135 | .av-inte-icon { 136 | box-sizing: border-box; 137 | width: 45rpx; 138 | height: 45rpx; 139 | padding: 6rpx; 140 | border-radius: 50%; 141 | border: 2rpx solid #707070; 142 | margin-right: 50rpx; 143 | vertical-align: middle; 144 | margin-top: -5rpx; 145 | } 146 | 147 | .av-inte:last-child .av-inte-icon { 148 | border-radius: 0; 149 | border: none; 150 | padding: 4rpx; 151 | margin-right: 0; 152 | } 153 | -------------------------------------------------------------------------------- /pages/audio/comment/comment.js: -------------------------------------------------------------------------------- 1 | // pages/audio/comment/comment.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/audio/comment/comment.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/audio/comment/comment.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | 11 | 12 | 不说不刻字母，这时候睡眠情况，低头是石鼓的热事一，这时候少妻夫留守，不说无谓的闲言，只是我觉得，请茶。 13 | 14 | 15 | 16 | 19" 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 29 | 30 | 31 | 32 | 不说不刻字母，这时候睡眠情况，低头是石鼓的热事一，这时候少妻夫留守，不说无谓的闲言，只是我觉得，请茶。 33 | 34 | 35 | 36 | 37 | 38 | 39 | 43 | 44 | 45 | 46 | 回复 六十六：不说不刻字母，这时候睡眠情况，低头是石鼓的热事一，这时候少妻夫留守，不说无谓的闲言，只是我觉得，请茶。 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 发表 56 | -------------------------------------------------------------------------------- /pages/audio/comment/comment.wxss: -------------------------------------------------------------------------------- 1 | /* pages/audio/comment/comment.wxss */ 2 | .comment-item { 3 | padding: 20rpx; 4 | border-bottom: 2rpx solid #f2f2f2; 5 | } 6 | 7 | .comm-avatar { 8 | width: 60rpx; 9 | height: 60rpx; 10 | border-radius: 50%; 11 | } 12 | 13 | .comm-user-info { 14 | display: inline-block; 15 | line-height: 30rpx; 16 | vertical-align: top; 17 | margin-left: 20rpx; 18 | } 19 | 20 | .comm-user-name { 21 | font-size: 12px; 22 | margin-top: 5rpx; 23 | } 24 | 25 | .comm-user-date { 26 | font-size: 11px; 27 | color: gray; 28 | } 29 | 30 | .comm-info { 31 | font-size: 12px; 32 | padding-left: 80rpx; 33 | } 34 | 35 | .comm-audio-box { 36 | width: 350rpx; 37 | height: 60rpx; 38 | margin: 20rpx 0 5rpx; 39 | box-sizing: border-box; 40 | padding: 0 10rpx; 41 | border-radius: 30rpx; 42 | background: linear-gradient(to right, #1e90ff, #436eee); 43 | } 44 | 45 | .comm-audio-btn { 46 | width: 30rpx; 47 | height: 30rpx; 48 | padding: 15rpx; 49 | } 50 | 51 | .comm-audio-time { 52 | color: #fff; 53 | float: right; 54 | padding: 15rpx 10rpx; 55 | } 56 | .comm-inBox{ 57 | padding: 0 20rpx; 58 | background: #f2f2f2; 59 | } 60 | .comm-inBox .comment-item{ 61 | border-bottom: 2rpx solid #eee; 62 | } 63 | .inBox-info{ 64 | margin: 8rpx 0; 65 | } 66 | .inBox-user-name{ 67 | color: #1e90ff; 68 | } 69 | .inBox-more{ 70 | margin: 8rpx 0; 71 | color: #1e90ff; 72 | } 73 | .landlord-bar{ 74 | background: #1e90ff; 75 | color: #FFF; 76 | border-radius: 10rpx; 77 | padding: 2rpx 10rpx; 78 | } 79 | /* 发评论 */ 80 | 81 | .comment-publish { 82 | position: fixed; 83 | box-sizing: border-box; 84 | bottom: 0; 85 | left: 0; 86 | border-top: 1rpx solid #f2f2f2; 87 | width: 100%; 88 | background: #fff; 89 | padding: 10rpx 20rpx; 90 | } 91 | 92 | .comment-publish image { 93 | width: 50rpx; 94 | height: 50rpx; 95 | margin-right: 15rpx; 96 | } 97 | 98 | .comment-publish input { 99 | display: inline-block; 100 | width: 500rpx; 101 | height: 52rpx; 102 | line-height: 52rpx; 103 | border: 2rpx solid #f2f2f2; 104 | border-radius: 10rpx; 105 | padding: 0 10rpx; 106 | font-size: 13px; 107 | } 108 | 109 | .publish-btn { 110 | display: inline-block; 111 | vertical-align: middle; 112 | float: right; 113 | width: 100rpx; 114 | height: 55rpx; 115 | line-height: 55rpx; 116 | border-radius: 10rpx; 117 | background: #1e90ff; 118 | text-align: center; 119 | font-size: 14px; 120 | color: #fff; 121 | } 122 | -------------------------------------------------------------------------------- /pages/data-value/data-value.js: -------------------------------------------------------------------------------- 1 | // pages/data-value/data-value.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | text: 'Hello world!', 9 | }, 10 | 11 | /** 12 | * 生命周期函数--监听页面加载 13 | */ 14 | onLoad: function (options) { 15 | let that = this; 16 | that.setData({ 17 | text: 'Happy Day!', 18 | }) 19 | console.log(that.data.text); 20 | }, 21 | 22 | /** 23 | * 生命周期函数--监听页面初次渲染完成 24 | */ 25 | onReady: function () { 26 | 27 | }, 28 | 29 | /** 30 | * 生命周期函数--监听页面显示 31 | */ 32 | onShow: function () { 33 | 34 | }, 35 | 36 | /** 37 | * 生命周期函数--监听页面隐藏 38 | */ 39 | onHide: function () { 40 | 41 | }, 42 | 43 | /** 44 | * 生命周期函数--监听页面卸载 45 | */ 46 | onUnload: function () { 47 | 48 | }, 49 | 50 | /** 51 | * 页面相关事件处理函数--监听用户下拉动作 52 | */ 53 | onPullDownRefresh: function () { 54 | 55 | }, 56 | 57 | /** 58 | * 页面上拉触底事件的处理函数 59 | */ 60 | onReachBottom: function () { 61 | 62 | }, 63 | 64 | /** 65 | * 用户点击右上角分享 66 | */ 67 | onShareAppMessage: function () { 68 | 69 | } 70 | }) -------------------------------------------------------------------------------- /pages/data-value/data-value.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/data-value/data-value.wxml: -------------------------------------------------------------------------------- 1 | 2 | {{text}} -------------------------------------------------------------------------------- /pages/data-value/data-value.wxss: -------------------------------------------------------------------------------- 1 | /* pages/data-value/data-value.wxss */ -------------------------------------------------------------------------------- /pages/favorite/favorite.js: -------------------------------------------------------------------------------- 1 | // pages/favorite/favorite.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | goodsList: [{ 9 | img: 'image/mi.jpg', 10 | dzzs: '22', 11 | collected: 1, 12 | id: 1 13 | }, 14 | { 15 | img: 'image/mi.jpg', 16 | dzzs: '33', 17 | collected: 0, 18 | id: 2 19 | }, 20 | { 21 | img: 'image/mi.jpg', 22 | dzzs: '44', 23 | collected: 1, 24 | id: 3 25 | }, 26 | { 27 | img: 'image/mi.jpg', 28 | dzzs: '555', 29 | collected: 1, 30 | id: 4 31 | } 32 | ], 33 | }, 34 | 35 | // 更改点赞状态 36 | onCollectionTap: function(event) { 37 | // 获取当前点击下标 38 | var index = event.currentTarget.dataset.index; 39 | // data中获取列表 40 | var message = this.data.goodsList; 41 | for (let i in message) { //遍历列表数据 42 | if (i == index) { //根据下标找到目标 43 | var collectStatus = false 44 | if (message[i].collected == 0) { //如果是没点赞+1 45 | collectStatus = true 46 | message[i].collected = parseInt(message[i].collected) + 1 47 | } else { 48 | collectStatus = false 49 | message[i].collected = parseInt(message[i].collected) - 1 50 | } 51 | wx.showToast({ 52 | title: collectStatus ? '收藏成功' : '取消收藏', 53 | }) 54 | } 55 | } 56 | this.setData({ 57 | goodsList: message 58 | }) 59 | }, 60 | 61 | /** 62 | * 生命周期函数--监听页面加载 63 | */ 64 | onLoad: function(options) { 65 | 66 | }, 67 | 68 | /** 69 | * 生命周期函数--监听页面初次渲染完成 70 | */ 71 | onReady: function() { 72 | 73 | }, 74 | 75 | /** 76 | * 生命周期函数--监听页面显示 77 | */ 78 | onShow: function() { 79 | 80 | }, 81 | 82 | /** 83 | * 生命周期函数--监听页面隐藏 84 | */ 85 | onHide: function() { 86 | 87 | }, 88 | 89 | /** 90 | * 生命周期函数--监听页面卸载 91 | */ 92 | onUnload: function() { 93 | 94 | }, 95 | 96 | /** 97 | * 页面相关事件处理函数--监听用户下拉动作 98 | */ 99 | onPullDownRefresh: function() { 100 | 101 | }, 102 | 103 | /** 104 | * 页面上拉触底事件的处理函数 105 | */ 106 | onReachBottom: function() { 107 | 108 | }, 109 | 110 | /** 111 | * 用户点击右上角分享 112 | */ 113 | onShareAppMessage: function() { 114 | 115 | } 116 | }) -------------------------------------------------------------------------------- /pages/favorite/favorite.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/favorite/favorite.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | {{item.dzzs}}人想要 9 | 10 | 11 | -------------------------------------------------------------------------------- /pages/favorite/favorite.wxss: -------------------------------------------------------------------------------- 1 | /* pages/favorite/favorite.wxss */ 2 | .page_container{ 3 | display: flex; 4 | justify-content: space-between; 5 | flex-wrap: wrap; 6 | } 7 | .good-item{ 8 | width: 300rpx; 9 | border: 2rpx solid #f2f2f2; 10 | background: #f8f8f8; 11 | border-radius: 10rpx; 12 | padding: 20rpx; 13 | margin-bottom: 30rpx; 14 | } 15 | .good-img{ 16 | width: 100%; 17 | } 18 | .fav-box{ 19 | text-align: center; 20 | } 21 | .fav-icon{ 22 | width: 30rpx; 23 | height: 30rpx; 24 | } -------------------------------------------------------------------------------- /pages/favorite/image/fav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/pages/favorite/image/fav.png -------------------------------------------------------------------------------- /pages/favorite/image/fav_on.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/pages/favorite/image/fav_on.png -------------------------------------------------------------------------------- /pages/favorite/image/mi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ideshun/miniProgram-tmp/03fb772badc644095550743d16e3cc4344049024/pages/favorite/image/mi.jpg -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | // pages/index/index.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/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | pages/index/index.wxml 3 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/index/index.wxss */ -------------------------------------------------------------------------------- /pages/participating/participating.js: -------------------------------------------------------------------------------- 1 | // pages/participating/participating.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/participating/participating.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/participating/participating.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 等666+人正在参与 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /pages/participating/participating.wxss: -------------------------------------------------------------------------------- 1 | /* pages/participating/participating.wxss */ 2 | .user-list{ 3 | padding-left: 15rpx; 4 | height: 80rpx; 5 | line-height: 80rpx; 6 | } 7 | .user-avatar{ 8 | width: 50rpx; 9 | height: 50rpx; 10 | border-radius: 50%; 11 | margin-left:-15rpx; 12 | border: 4rpx solod #FFF; 13 | box-shadow: 2rpx 2rpx 6rpx 2rpx #FFF; 14 | vertical-align: middle; 15 | } 16 | .user-list-text{ 17 | font-size: 12px; 18 | color: gray; 19 | padding-left: 10rpx; 20 | } -------------------------------------------------------------------------------- /pages/video/video-detail/video-detail.js: -------------------------------------------------------------------------------- 1 | // pages/video/video-detail/video-detail.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/video/video-detail/video-detail.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/video/video-detail/video-detail.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 图兔兔吐突突 10 | 11/09 11 | 12 | 13 | 14 | 15 | 不做不可及的梦，这使我的睡眠安恬。避开无事时过分热络的友谊，这使我少些负担和承诺。不说无谓的闲言，这使我觉得清畅 16 | 17 | 18 | 19 | 20 | 21 | 5 22 | 5 23 | 5 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 评论 32 | 最热 33 | 34 | 35 | 36 | 37 | 41 | 42 | 43 | 44 | 不说不刻字母，这时候睡眠情况，低头是石鼓的热事一，这时候少妻夫留守，不说无谓的闲言，只是我觉得，请茶。 45 | 46 | 47 | 48 | 19" 49 | 50 | 51 | 52 | 白炽灯 回复 王美丽：好听吗？ 53 | 54 | 55 | 王美丽：好听 56 | 57 | 查看3条评论 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 发表 67 | -------------------------------------------------------------------------------- /pages/video/video-detail/video-detail.wxss: -------------------------------------------------------------------------------- 1 | /* pages/video/video-detail/video-detail.wxss */ 2 | @import "../video.wxss"; 3 | 4 | 5 | /* 评论区 */ 6 | .comment-container{ 7 | padding-bottom: 110rpx; 8 | } 9 | .comment-topBar { 10 | font-size: 14px; 11 | padding: 20rpx; 12 | border-bottom: 2rpx solid #f2f2f2; 13 | } 14 | 15 | .comment-sort { 16 | float: right; 17 | } 18 | 19 | .comment-item { 20 | padding: 20rpx; 21 | border-bottom: 2rpx solid #f2f2f2; 22 | } 23 | 24 | .comm-avatar { 25 | width: 60rpx; 26 | height: 60rpx; 27 | border-radius: 50%; 28 | } 29 | 30 | .comm-user-info { 31 | display: inline-block; 32 | line-height: 30rpx; 33 | vertical-align: top; 34 | margin-left: 20rpx; 35 | } 36 | 37 | .comm-user-name { 38 | font-size: 12px; 39 | margin-top: 5rpx; 40 | } 41 | 42 | .comm-user-date { 43 | font-size: 11px; 44 | color: gray; 45 | } 46 | 47 | .comm-info { 48 | font-size: 12px; 49 | padding-left: 80rpx; 50 | } 51 | 52 | .comm-audio-box { 53 | width: 350rpx; 54 | height: 60rpx; 55 | margin: 20rpx 0 5rpx; 56 | box-sizing: border-box; 57 | padding: 0 10rpx; 58 | border-radius: 30rpx; 59 | background: linear-gradient(to right, #1e90ff, #436eee); 60 | } 61 | 62 | .comm-audio-btn { 63 | width: 30rpx; 64 | height: 30rpx; 65 | padding: 15rpx; 66 | } 67 | 68 | .comm-audio-time { 69 | color: #fff; 70 | float: right; 71 | padding: 15rpx 10rpx; 72 | } 73 | 74 | .comm-inBox { 75 | border-radius: 10rpx; 76 | margin-top: 15rpx; 77 | padding: 10rpx 20rpx; 78 | background: #f2f2f2; 79 | } 80 | 81 | .inBox-info { 82 | margin: 8rpx 0; 83 | } 84 | 85 | .inBox-user-name { 86 | color: #1e90ff; 87 | } 88 | 89 | .inBox-more { 90 | margin: 8rpx 0; 91 | color: #1e90ff; 92 | } 93 | 94 | /* 发评论 */ 95 | 96 | .comment-publish { 97 | position: fixed; 98 | box-sizing: border-box; 99 | bottom: 0; 100 | left: 0; 101 | border-top: 1rpx solid #f2f2f2; 102 | width: 100%; 103 | background: #fff; 104 | padding: 10rpx 20rpx; 105 | } 106 | 107 | .comment-publish image { 108 | width: 50rpx; 109 | height: 50rpx; 110 | margin-right: 15rpx; 111 | } 112 | 113 | .comment-publish input { 114 | display: inline-block; 115 | width: 500rpx; 116 | height: 52rpx; 117 | line-height: 52rpx; 118 | border: 2rpx solid #f2f2f2; 119 | border-radius: 10rpx; 120 | padding: 0 10rpx; 121 | font-size: 13px; 122 | } 123 | 124 | .publish-btn { 125 | display: inline-block; 126 | vertical-align: middle; 127 | float: right; 128 | width: 100rpx; 129 | height: 55rpx; 130 | line-height: 55rpx; 131 | border-radius: 10rpx; 132 | background: #1e90ff; 133 | text-align: center; 134 | font-size: 14px; 135 | color: #fff; 136 | } 137 | -------------------------------------------------------------------------------- /pages/video/video-list/video-list.js: -------------------------------------------------------------------------------- 1 | // pages/video/video-list/video-list.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/video/video-list/video-list.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/video/video-list/video-list.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 图兔兔吐突突 10 | 11/09 11 | 12 | 13 | 14 | 15 | 不做不可及的梦，这使我的睡眠安恬。避开无事时过分热络的友谊，这使我少些负担和承诺。不说无谓的闲言，这使我觉得清畅 16 | 17 | 18 | 19 | 20 | 5 21 | 5 22 | 5 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /pages/video/video-list/video-list.wxss: -------------------------------------------------------------------------------- 1 | /* pages/video/video-list/video-list.wxss */ 2 | @import "../video.wxss"; 3 | -------------------------------------------------------------------------------- /pages/video/video.wxss: -------------------------------------------------------------------------------- 1 | .av-list{ 2 | border-bottom: 15rpx solid #f2f2f2; 3 | } 4 | .avlist-item { 5 | padding: 20rpx; 6 | background: #fff; 7 | } 8 | 9 | .avuser-avatar { 10 | width: 80rpx; 11 | height: 80rpx; 12 | border-radius: 50%; 13 | } 14 | 15 | .avuser-info { 16 | display: inline-block; 17 | vertical-align: top; 18 | margin-left: 20rpx; 19 | } 20 | 21 | .avuser-name { 22 | font-size: 14px; 23 | margin-top: 6rpx; 24 | color: #666; 25 | } 26 | 27 | .avuser-time { 28 | font-size: 12px; 29 | color: gray; 30 | } 31 | 32 | 33 | .avuser-avatar { 34 | width: 80rpx; 35 | height: 80rpx; 36 | border-radius: 50%; 37 | } 38 | 39 | .avuser-info { 40 | display: inline-block; 41 | vertical-align: top; 42 | margin-left: 20rpx; 43 | } 44 | 45 | .avuser-name { 46 | font-size: 14px; 47 | margin-top: 6rpx; 48 | color: #666; 49 | } 50 | 51 | .avuser-time { 52 | font-size: 12px; 53 | color: gray; 54 | } 55 | 56 | .video-item { 57 | position: relative; 58 | padding: 10rpx; 59 | background-size: cover; 60 | background-position: center; 61 | overflow: hidden; 62 | } 63 | 64 | .video-text { 65 | position: relative; 66 | font-size: 14px; 67 | line-height: 42rpx; 68 | z-index: 9; 69 | } 70 | .video-box{ 71 | width: 100%; 72 | height: 390rpx; 73 | margin-top: 10rpx; 74 | } 75 | /* 互动区 */ 76 | .av-inte-box { 77 | display: flex; 78 | justify-content: space-between; 79 | padding: 20rpx 40rpx; 80 | font-size: 14px; 81 | color: #707070; 82 | border-top: 2rpx solid #f2f2f2; 83 | } 84 | 85 | .av-inte-icon { 86 | box-sizing: border-box; 87 | width: 45rpx; 88 | height: 45rpx; 89 | padding: 6rpx; 90 | border-radius: 50%; 91 | border: 2rpx solid #707070; 92 | margin-right: 50rpx; 93 | vertical-align: middle; 94 | margin-top: -5rpx; 95 | } 96 | 97 | .av-inte:last-child .av-inte-icon { 98 | border-radius: 0; 99 | border: none; 100 | padding: 4rpx; 101 | margin-right: 0; 102 | } 103 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": true, 9 | "postcss": true, 10 | "minified": true, 11 | "newFeature": true 12 | }, 13 | "compileType": "miniprogram", 14 | "libVersion": "2.3.2", 15 | "appid": "wxd9cf69b2b560c65f", 16 | "projectname": "%E6%88%91%E7%9A%84%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%A8%A1%E6%9D%BF", 17 | "debugOptions": { 18 | "hidedInDevtools": [] 19 | }, 20 | "scripts": {}, 21 | "condition": { 22 | "search": { 23 | "current": -1, 24 | "list": [] 25 | }, 26 | "conversation": { 27 | "current": -1, 28 | "list": [] 29 | }, 30 | "plugin": { 31 | "current": -1, 32 | "list": [] 33 | }, 34 | "game": { 35 | "list": [] 36 | }, 37 | "miniprogram": { 38 | "current": 7, 39 | "list": [ 40 | { 41 | "id": 0, 42 | "name": "data的赋值与取值", 43 | "pathName": "pages/data-value/data-value", 44 | "query": "" 45 | }, 46 | { 47 | "id": -1, 48 | "name": "正在参与", 49 | "pathName": "pages/participating/participating", 50 | "query": "" 51 | }, 52 | { 53 | "id": 2, 54 | "name": "语音列表", 55 | "pathName": "pages/audio/audio-list/audio-list", 56 | "query": "" 57 | }, 58 | { 59 | "id": -1, 60 | "name": "语音详情", 61 | "pathName": "pages/audio/audio-detail/audio-detail", 62 | "query": "" 63 | }, 64 | { 65 | "id": -1, 66 | "name": "语音评论详情", 67 | "pathName": "pages/audio/comment/comment", 68 | "query": "" 69 | }, 70 | { 71 | "id": -1, 72 | "name": "视频列表", 73 | "pathName": "pages/video/video-list/video-list", 74 | "query": "" 75 | }, 76 | { 77 | "id": -1, 78 | "name": "视频详情", 79 | "pathName": "pages/video/video-detail/video-detail", 80 | "query": "" 81 | }, 82 | { 83 | "id": -1, 84 | "name": "列表收藏", 85 | "pathName": "pages/favorite/favorite" 86 | } 87 | ] 88 | } 89 | } 90 | } -------------------------------------------------------------------------------- /style/public.wxss: -------------------------------------------------------------------------------- 1 | .page_container{ 2 | padding: 20rpx; 3 | } 4 | .page_modules{ 5 | 6 | } 7 | .modules_flex{ 8 | display: flex; 9 | } --------------------------------------------------------------------------------