├── pages ├── playing │ ├── playing.json │ ├── playing.wxss │ ├── playing.wxml │ └── playing.js ├── search │ ├── search.json │ ├── search.wxss │ ├── search.wxml │ └── search.js ├── videos │ ├── videos.json │ ├── videos.js │ ├── videos.wxss │ └── videos.wxml ├── index │ ├── index.json │ ├── index.js │ ├── index.wxss │ └── index.wxml ├── channel │ ├── channel.json │ ├── channel.js │ ├── channel.wxss │ └── channel.wxml ├── logs │ ├── logs.json │ ├── logs.wxss │ ├── logs.wxml │ └── logs.js └── mine │ ├── mine.json │ ├── mine.wxml │ ├── mine.js │ └── mine.wxss ├── images ├── 搜索.gif ├── 播放.gif ├── 首页.gif ├── hu_1.png ├── hu_2.png ├── hu_3.png ├── hu_4.png ├── logo.png ├── mine.png ├── user.jpg ├── 短视频.gif ├── channel.png ├── huang_1.jpg ├── huang_2.png ├── huang_3.png ├── huang_4.png ├── index.png ├── poster.png ├── search.png ├── start.png ├── videos.png ├── wilddog.png ├── zhao_1.jpg ├── zhao_2.png ├── zhao_3.png ├── zhao_4.png ├── index_focus.png ├── mine_focus.png ├── tap_bar_01.png ├── tap_bar_02.png ├── tap_bar_03.png ├── videos_focus.png ├── channel_focus.png ├── tap_bar_01_active.png ├── tap_bar_02_active.png └── tap_bar_03_active.png ├── app.wxss ├── utils └── util.js ├── project.config.json ├── app.json ├── app.js ├── readme.md └── weui.wxss /pages/playing/playing.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/search/search.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/videos/videos.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | } -------------------------------------------------------------------------------- /pages/channel/channel.json: -------------------------------------------------------------------------------- 1 | { 2 | 3 | } -------------------------------------------------------------------------------- /pages/playing/playing.wxss: -------------------------------------------------------------------------------- 1 | video{ 2 | width: 100%; 3 | } -------------------------------------------------------------------------------- /pages/logs/logs.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "查看启动日志" 3 | } -------------------------------------------------------------------------------- /images/搜索.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/搜索.gif -------------------------------------------------------------------------------- /images/播放.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/播放.gif -------------------------------------------------------------------------------- /images/首页.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/首页.gif -------------------------------------------------------------------------------- /images/hu_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/hu_1.png -------------------------------------------------------------------------------- /images/hu_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/hu_2.png -------------------------------------------------------------------------------- /images/hu_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/hu_3.png -------------------------------------------------------------------------------- /images/hu_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/hu_4.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/mine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/mine.png -------------------------------------------------------------------------------- /images/user.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/user.jpg -------------------------------------------------------------------------------- /images/短视频.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/短视频.gif -------------------------------------------------------------------------------- /images/channel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/channel.png -------------------------------------------------------------------------------- /images/huang_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/huang_1.jpg -------------------------------------------------------------------------------- /images/huang_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/huang_2.png -------------------------------------------------------------------------------- /images/huang_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/huang_3.png -------------------------------------------------------------------------------- /images/huang_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/huang_4.png -------------------------------------------------------------------------------- /images/index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/index.png -------------------------------------------------------------------------------- /images/poster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/poster.png -------------------------------------------------------------------------------- /images/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/search.png -------------------------------------------------------------------------------- /images/start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/start.png -------------------------------------------------------------------------------- /images/videos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/videos.png -------------------------------------------------------------------------------- /images/wilddog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/wilddog.png -------------------------------------------------------------------------------- /images/zhao_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/zhao_1.jpg -------------------------------------------------------------------------------- /images/zhao_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/zhao_2.png -------------------------------------------------------------------------------- /images/zhao_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/zhao_3.png -------------------------------------------------------------------------------- /images/zhao_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/zhao_4.png -------------------------------------------------------------------------------- /images/index_focus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/index_focus.png -------------------------------------------------------------------------------- /images/mine_focus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/mine_focus.png -------------------------------------------------------------------------------- /images/tap_bar_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/tap_bar_01.png -------------------------------------------------------------------------------- /images/tap_bar_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/tap_bar_02.png -------------------------------------------------------------------------------- /images/tap_bar_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/tap_bar_03.png -------------------------------------------------------------------------------- /images/videos_focus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/videos_focus.png -------------------------------------------------------------------------------- /pages/mine/mine.json: -------------------------------------------------------------------------------- 1 | { 2 | "enablePullDownRefresh": false, 3 | "navigationBarTitleText": "个人中心" 4 | } -------------------------------------------------------------------------------- /images/channel_focus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/channel_focus.png -------------------------------------------------------------------------------- /images/tap_bar_01_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/tap_bar_01_active.png -------------------------------------------------------------------------------- /images/tap_bar_02_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/tap_bar_02_active.png -------------------------------------------------------------------------------- /images/tap_bar_03_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caicong0805/wxapp_tenVideo/HEAD/images/tap_bar_03_active.png -------------------------------------------------------------------------------- /pages/playing/playing.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 2017年度献礼！用3分钟混剪告诉你这一年的感动和眼泪！ -------------------------------------------------------------------------------- /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/logs/logs.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{index + 1}}. {{log}} 5 | 6 | 7 | -------------------------------------------------------------------------------- /pages/logs/logs.js: -------------------------------------------------------------------------------- 1 | //logs.js 2 | var util = require('../../utils/util.js') 3 | Page({ 4 | data: { 5 | logs: [] 6 | }, 7 | onLoad: function () { 8 | this.setData({ 9 | logs: (wx.getStorageSync('logs') || []).map(function (log) { 10 | return util.formatTime(new Date(log)) 11 | }) 12 | }) 13 | } 14 | }) 15 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | @import "./weui.wxss"; 3 | page{ 4 | height: 100%; 5 | position: relative; 6 | } 7 | .container { 8 | height: 100%; 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | justify-content: space-between; 13 | padding: 300rpx 0 0 0; 14 | box-sizing: border-box; 15 | background: rgba(205, 198, 197, 1); 16 | } 17 | .bold { 18 | font-weight: bold; 19 | } 20 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | function formatTime(date) { 2 | var year = date.getFullYear() 3 | var month = date.getMonth() + 1 4 | var day = date.getDate() 5 | 6 | var hour = date.getHours() 7 | var minute = date.getMinutes() 8 | var second = date.getSeconds() 9 | 10 | 11 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 12 | } 13 | 14 | function formatNumber(n) { 15 | n = n.toString() 16 | return n[1] ? n : '0' + n 17 | } 18 | 19 | module.exports = { 20 | formatTime: formatTime 21 | } 22 | -------------------------------------------------------------------------------- /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.6.4", 12 | "appid": "wx3519c6a0eef4d043", 13 | "projectname": "%E8%85%BE%E8%AE%AF%E8%A7%86%E9%A2%91", 14 | "condition": { 15 | "search": { 16 | "current": -1, 17 | "list": [] 18 | }, 19 | "conversation": { 20 | "current": -1, 21 | "list": [] 22 | }, 23 | "miniprogram": { 24 | "current": -1, 25 | "list": [] 26 | } 27 | } 28 | } -------------------------------------------------------------------------------- /pages/mine/mine.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{userInfo.nickName}} 8 | 9 | 10 | 11 | 12 | 开通VIP会员 13 | 14 | 15 | 观看历史 16 | 17 | 18 | 我的看单 19 | 20 | 21 | 设置 22 | 23 | 24 | -------------------------------------------------------------------------------- /pages/search/search.wxss: -------------------------------------------------------------------------------- 1 | .weui-search-bar { 2 | position:relative; 3 | padding:6px 10px; 4 | display:-webkit-box; 5 | display:-webkit-flex; 6 | display:flex; 7 | box-sizing:border-box; 8 | background-color:#EFEFF4; 9 | border-top:0 solid #D7D6DC; 10 | border-bottom:0 solid #D7D6DC; 11 | border-radius:4px; 12 | } 13 | 14 | .search-log{ 15 | border:1px solid #eee !important; 16 | display:inline-block !important; 17 | margin-left:10px !important; 18 | margin-top:5px !important; 19 | border-radius:5px; 20 | padding-left:14px; 21 | padding-right:14px; 22 | box-sizing:border-box; 23 | text-align:center; 24 | text-decoration:none; 25 | line-height:1.666666; 26 | } 27 | 28 | .clear-search-log{ 29 | text-align: center; 30 | } 31 | .weui-search-bar__cancel-btn{ 32 | color: orange; 33 | font-size: 14px; 34 | } -------------------------------------------------------------------------------- /pages/playing/playing.js: -------------------------------------------------------------------------------- 1 | // pages/playing/playing.js 2 | Page({ 3 | 4 | /** 5 | * 页面的初始数据 6 | */ 7 | data: { 8 | src:'http://gslb.miaopai.com/stream/PAEyMDoxMSB9hV6BVT1l5SHT-sMVVRVgHlL7bA__.mp4?mpflag=64&vend=1&os=3&partner=1&platform=2&cookie_id=&refer=miaopai&scid=PAEyMDoxMSB9hV6BVT1l5SHT-sMVVRVgHlL7bA__' 9 | 10 | }, 11 | 12 | /** 13 | * 生命周期函数--监听页面加载 14 | */ 15 | onLoad: function (options) { 16 | 17 | }, 18 | 19 | /** 20 | * 生命周期函数--监听页面初次渲染完成 21 | */ 22 | onReady: function () { 23 | 24 | }, 25 | 26 | /** 27 | * 生命周期函数--监听页面显示 28 | */ 29 | onShow: function () { 30 | 31 | }, 32 | 33 | /** 34 | * 生命周期函数--监听页面隐藏 35 | */ 36 | onHide: function () { 37 | 38 | }, 39 | 40 | /** 41 | * 生命周期函数--监听页面卸载 42 | */ 43 | onUnload: function () { 44 | 45 | }, 46 | 47 | /** 48 | * 页面相关事件处理函数--监听用户下拉动作 49 | */ 50 | onPullDownRefresh: function () { 51 | 52 | }, 53 | 54 | /** 55 | * 页面上拉触底事件的处理函数 56 | */ 57 | onReachBottom: function () { 58 | 59 | }, 60 | 61 | /** 62 | * 用户点击右上角分享 63 | */ 64 | onShareAppMessage: function () { 65 | 66 | } 67 | }) -------------------------------------------------------------------------------- /pages/channel/channel.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | var API_URL = 'https://www.easy-mock.com/mock/5a223177707056548f085eee/data/getTencentInfo' 4 | const app = getApp() 5 | 6 | Page({ 7 | data: { 8 | wangzhe:null, 9 | kuaikan:null, 10 | shenjianji:null, 11 | activeIndex: 0, 12 | }, 13 | search:function(event){ 14 | wx.navigateTo({ 15 | url:"../search/search" 16 | }) 17 | }, 18 | changeTab: function(e){ 19 | var type = 20 | e.target.dataset.index; 21 | this.setData({ 22 | activeIndex: type 23 | }); 24 | }, 25 | swiperTab: function(e){ 26 | var type = 27 | e.detail.current; 28 | this.setData({ 29 | activeIndex: type 30 | }); 31 | }, 32 | //事件处理函数 33 | bindViewTap: function() { 34 | 35 | }, 36 | // 获取工作岗位列表 37 | onLoad: function () { 38 | var that = this; 39 | wx.request({ 40 | url:API_URL, 41 | data:{}, 42 | success:function(res){ 43 | console.log(res.data.data); 44 | that.setData({ 45 | wangzhe:res.data.data.shortVideo[0].classify, 46 | kuaikan:res.data.data.shortVideo[1].classify, 47 | shenjianji:res.data.data.shortVideo[2].classify 48 | }) 49 | } 50 | }); 51 | } 52 | }) 53 | -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | var app = getApp() 4 | Page({ 5 | data: { 6 | scrollId : 'red', 7 | isScrollX: true, 8 | bannerList : [ 9 | { 10 | url :　"../../images/hu_1.png" 11 | },{ 12 | url : "../../images/huang_1.jpg" 13 | },{ 14 | url : "../../images/zhao_1.jpg" 15 | } 16 | ], 17 | activeBannerIndex : 0, 18 | userInfo: {} 19 | }, 20 | search:function(event){ 21 | wx.navigateTo({ 22 | url:"../search/search" 23 | }); 24 | }, 25 | //事件处理函数 26 | bindViewTap: function() { 27 | wx.navigateTo({ 28 | url: '../logs/logs' 29 | }) 30 | }, 31 | bindChange : function(e){ 32 | this.setData({activeBannerIndex : e.detail.current}); 33 | }, 34 | onLoad: function () { 35 | wx.showToast({ 36 | title:"加载中...", 37 | icon:"loading", 38 | duration:10000, 39 | }); 40 | wx.hideToast(); 41 | console.log('onLoad') 42 | var that = this 43 | //调用应用实例的方法获取全局数据 44 | app.getUserInfo(function(userInfo){ 45 | 46 | //更新数据 47 | that.setData({ 48 | userInfo:userInfo 49 | }) 50 | }) 51 | console.log(app.globalData); 52 | this.setData({'windowWidth' : app.globalData.windowWidth}); 53 | } 54 | }) 55 | -------------------------------------------------------------------------------- /pages/videos/videos.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | var API_URL = 'https://www.easy-mock.com/mock/5a223177707056548f085eee/data/getTencentInfo' 4 | const app = getApp() 5 | 6 | Page({ 7 | data: { 8 | wangzhe:null, 9 | kuaikan:null, 10 | shenjianji:null, 11 | activeIndex: 0, 12 | }, 13 | 14 | changeTab: function(e){ 15 | var type = 16 | e.target.dataset.index; 17 | this.setData({ 18 | activeIndex: type 19 | }); 20 | }, 21 | swiperTab: function(e){ 22 | var type = 23 | e.detail.current; 24 | this.setData({ 25 | activeIndex: type 26 | }); 27 | }, 28 | //事件处理函数 29 | bindViewTap: function() { 30 | 31 | }, 32 | // 获取工作岗位列表 33 | onLoad: function () { 34 | var that = this; 35 | wx.showToast({ 36 | title:"加载中...", 37 | icon:"loading", 38 | duration:10000, 39 | }); 40 | wx.request({ 41 | url:API_URL, 42 | data:{}, 43 | success:function(res){ 44 | wx.hideToast(); 45 | console.log(res.data.data); 46 | that.setData({ 47 | wangzhe:res.data.data.shortVideo[0].classify, 48 | kuaikan:res.data.data.shortVideo[1].classify, 49 | shenjianji:res.data.data.shortVideo[2].classify 50 | }) 51 | } 52 | }); 53 | } 54 | }) 55 | -------------------------------------------------------------------------------- /pages/search/search.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /pages/channel/channel.wxss: -------------------------------------------------------------------------------- 1 | .weui-tab{ 2 | width: 100%; 3 | } 4 | .swiper-tab{ 5 | display: flex; 6 | flex-direction: row; 7 | justify-content: space-around; 8 | align-items: center; 9 | border-bottom: 1rpx solid #ededed; 10 | } 11 | .swiper-tab-item{ 12 | flex: 1; 13 | text-align: center; 14 | align-items: center; 15 | font-size: 30rpx; 16 | height: 90rpx; 17 | color: black; 18 | line-height: 90rpx; 19 | } 20 | .active{ 21 | border-bottom: 1px solid orange; 22 | 23 | } 24 | swiper{ 25 | text-align: center; 26 | display: flex; 27 | justify-content: center; 28 | align-content: center; 29 | height: 800px; 30 | } 31 | swiper-item{ 32 | overflow-y: scroll; 33 | -webkit-overflow-scrolling : touch; 34 | } 35 | .active{ 36 | color: orange; 37 | } 38 | .picture{ 39 | z-index: 0; 40 | width: 100%; 41 | margin-bottom: 30px; 42 | } 43 | .top{ 44 | color: white; 45 | position: absolute; 46 | left: 5px; 47 | z-index: 1; 48 | } 49 | .list-title{ 50 | margin-bottom: 15px; 51 | text-align: left; 52 | display: inline-block; 53 | font-weight: bold; 54 | } 55 | .contain{ 56 | text-align: left; 57 | } 58 | .wz{ 59 | width: 100%; 60 | } 61 | .list-font{ 62 | font-size: 20px; 63 | } 64 | .detail{ 65 | margin-bottom: 20px; 66 | } -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | 4 | "pages/index/index", 5 | "pages/videos/videos", 6 | "pages/mine/mine", 7 | "pages/search/search", 8 | "pages/channel/channel", 9 | "pages/playing/playing", 10 | "pages/logs/logs" 11 | 12 | ], 13 | "window": { 14 | "backgroundTextStyle": "light", 15 | "navigationBarBackgroundColor": "#fff", 16 | "navigationBarTitleText": "腾讯视频", 17 | "navigationBarTextStyle": "black" 18 | }, 19 | "tabBar": { 20 | "color": "#2f2f2f", 21 | "selectedColor": "#e65e44", 22 | "backgroundColor": "#ffffff", 23 | "borderStyle": "black", 24 | "list": [ 25 | { 26 | "text": "首页", 27 | "iconPath": "images/index.png", 28 | "selectedIconPath": "images/index_focus.png", 29 | "pagePath": "pages/index/index" 30 | }, 31 | { 32 | "text": "短视频", 33 | "iconPath": "images/videos.png", 34 | "selectedIconPath": "images/videos_focus.png", 35 | "pagePath": "pages/videos/videos" 36 | }, 37 | { 38 | "text": "频道", 39 | "iconPath": "images/channel.png", 40 | "selectedIconPath": "images/channel_focus.png", 41 | "pagePath": "pages/channel/channel" 42 | }, 43 | { 44 | "text": "我的", 45 | "iconPath": "images/mine.png", 46 | "selectedIconPath": "images/mine_focus.png", 47 | "pagePath": "pages/mine/mine" 48 | } 49 | ] 50 | } 51 | } -------------------------------------------------------------------------------- /pages/mine/mine.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | //获取应用实例 3 | const app = getApp() 4 | 5 | Page({ 6 | data: { 7 | arrList:[ 8 | "我的优惠", 9 | "13177896263", 10 | "平台使用须知" 11 | ] 12 | }, 13 | //事件处理函数 14 | bindViewTap: function() { 15 | wx.navigateTo({ 16 | url: '../logs/logs' 17 | }) 18 | }, 19 | toplay:function(){ 20 | wx.navigateTo({ 21 | url:"../playing/playing" 22 | }) 23 | }, 24 | onLoad: function () { 25 | if (app.globalData.userInfo) { 26 | this.setData({ 27 | userInfo: app.globalData.userInfo, 28 | hasUserInfo: true 29 | }) 30 | } else if (this.data.canIUse){ 31 | // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 32 | // 所以此处加入 callback 以防止这种情况 33 | app.userInfoReadyCallback = res => { 34 | this.setData({ 35 | userInfo: res.userInfo, 36 | hasUserInfo: true 37 | }) 38 | } 39 | } else { 40 | // 在没有 open-type=getUserInfo 版本的兼容处理 41 | wx.getUserInfo({ 42 | success: res => { 43 | app.globalData.userInfo = res.userInfo 44 | this.setData({ 45 | userInfo: res.userInfo, 46 | hasUserInfo: true 47 | }) 48 | } 49 | }) 50 | } 51 | }, 52 | getUserInfo: function(e) { 53 | console.log(e) 54 | app.globalData.userInfo = e.detail.userInfo 55 | this.setData({ 56 | userInfo: e.detail.userInfo, 57 | hasUserInfo: true 58 | }) 59 | } 60 | }) 61 | -------------------------------------------------------------------------------- /pages/videos/videos.wxss: -------------------------------------------------------------------------------- 1 | .weui-tab{ 2 | width: 100%; 3 | } 4 | .swiper-tab{ 5 | display: flex; 6 | flex-direction: row; 7 | justify-content: space-around; 8 | align-items: center; 9 | border-bottom: 1rpx solid #ededed; 10 | } 11 | .swiper-tab-item{ 12 | flex: 1; 13 | text-align: center; 14 | font-size: 32rpx; 15 | height: 90rpx; 16 | color: black; 17 | line-height: 90rpx; 18 | } 19 | .active{ 20 | border-bottom: 2px solid orange; 21 | 22 | } 23 | swiper{ 24 | text-align: center; 25 | display: flex; 26 | justify-content: center; 27 | align-content: center; 28 | height: 800px; 29 | } 30 | swiper-item{ 31 | overflow-y: scroll; 32 | -webkit-overflow-scrolling : touch; 33 | } 34 | .active{ 35 | color: orange; 36 | } 37 | .picture{ 38 | z-index: 0; 39 | width: 100%; 40 | margin-bottom: 30px; 41 | position: relative; 42 | } 43 | .picture ::before{ 44 | position: absolute; 45 | border:11px solid transparent; 46 | border-left:17px solid #fff; 47 | content: ""; 48 | top: 100px; 49 | left: 180px; 50 | } 51 | 52 | .top{ 53 | color: white; 54 | position: absolute; 55 | left: 5px; 56 | z-index: 1; 57 | } 58 | .list-title{ 59 | margin-bottom: 15px; 60 | text-align: left; 61 | display: inline-block; 62 | font-weight: bold; 63 | } 64 | .contain{ 65 | text-align: left; 66 | } 67 | .wz{ 68 | width: 100%; 69 | } 70 | .list-font{ 71 | font-size: 20px; 72 | font-family: Arial,Helvetica,sans-serif;font-size:100%; 73 | } 74 | .detail{ 75 | margin-bottom: 20px; 76 | } -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | var wilddog = require('wilddog-weapp-all'); 2 | //app.js 3 | App({ 4 | onLaunch: function () { 5 | var config = { 6 | syncURL:'https://wd3319485295hajoox.wilddogio.com', 7 | authDomain:'wd3319485295hajoox.wilddog.com' 8 | } 9 | wilddog.initializeApp(config); 10 | wilddog.auth().signInWeapp(function(err,user){ 11 | console.log(user); 12 | }) 13 | // 数据库 ip db 14 | this.ref = wilddog.sync().ref('search') 15 | //调用API从本地缓存中获取数据 16 | var logs = wx.getStorageSync('logs') || [] 17 | logs.unshift(Date.now()) 18 | wx.setStorageSync('logs', logs); 19 | var _this = this; 20 | wx.getSystemInfo({ 21 | success: function(res) { 22 | _this.globalData.windowWidth = res.windowWidth; 23 | } 24 | }) 25 | }, 26 | addItem:function(text){ 27 | this.ref.push(text); 28 | }, 29 | getTodoRef:function(){ 30 | return this.ref; 31 | }, 32 | globalData: { 33 | userInfo: null 34 | }, 35 | getUserInfo:function(cb){ 36 | var that = this 37 | if(this.globalData.userInfo){ 38 | typeof cb == "function" && cb(this.globalData.userInfo) 39 | }else{ 40 | //调用登录接口 41 | wx.login({ 42 | success: function () { 43 | wx.getUserInfo({ 44 | success: function (res) { 45 | that.globalData.userInfo = res.userInfo 46 | typeof cb == "function" && cb(that.globalData.userInfo) 47 | } 48 | }) 49 | } 50 | }) 51 | } 52 | }, 53 | globalData:{ 54 | userInfo:null 55 | } 56 | }) -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .top-image{ 3 | position: absolute; 4 | top: 0; 5 | left: 0; 6 | z-index: 0; 7 | width: 100%; 8 | 9 | } 10 | .icon { 11 | position: absolute; 12 | right: 45rpx; 13 | top: 50rpx; 14 | z-index: 6; 15 | } 16 | .logo { 17 | position: absolute; 18 | left: 55rpx; 19 | top: 47rpx; 20 | width: 239rpx; 21 | height: 53rpx; 22 | z-index: 8; 23 | } 24 | .container .slider { 25 | height: 100%; 26 | width: 100%; 27 | padding-bottom: 0; 28 | bottom: 50rpx; 29 | overflow: hidden; 30 | position: relative; 31 | background: linear-gradient(to top,rgba(205, 198, 197, 1) 80%, rgba(205, 198, 197, 0.7) 90%, rgba(205, 198, 197, 0.0) 100%); 32 | } 33 | .container .slider-content{ 34 | height: 100%; 35 | width: 9999rpx; 36 | display: table; 37 | transform: translate3d(0rpx, 0 , 0); 38 | left:0; 39 | } 40 | .container .scroll-view-item { 41 | height: 100%; 42 | width: calc(100% - 92rpx); 43 | border-radius: 20rpx; 44 | margin-left: 46rpx; 45 | display: flex; 46 | flex-direction: column; 47 | position: relative; 48 | text-align: center; 49 | background: #fff; 50 | } 51 | .container .title { 52 | font-size: 34rpx; 53 | font-weight: bold; 54 | line-height: 190rpx; 55 | display: inline-block; 56 | } 57 | .container .content { 58 | width: 100%; 59 | margin: 0 0rpx; 60 | } 61 | .container .content .list{ 62 | display: flex; 63 | flex-direction: row; 64 | width: 100%; 65 | } 66 | .container .content .list .detail { 67 | flex:1; 68 | margin:0 30rpx; 69 | } 70 | .container .content .list .detail image{ 71 | width: 100%; 72 | height: 100%; 73 | display: block; 74 | } 75 | .container .content .list .detail .font-area { 76 | padding: 10rpx 0; 77 | } 78 | .container .content .list .detail .font-area text{ 79 | font-size: 24rpx; 80 | line-height: 34rpx; 81 | display: flex; 82 | } 83 | .container .scroll-view-item.bc-green { 84 | background: green; 85 | } 86 | .container .scroll-view-item.bc-red { 87 | background: red; 88 | } 89 | .container .scroll-view-item.bc-yellow { 90 | background: yellow; 91 | } 92 | .container .scroll-view-item.bc-blue { 93 | background: blue; 94 | } 95 | .container .space-50 { 96 | height: 50rpx; 97 | width: 100%; 98 | } -------------------------------------------------------------------------------- /pages/search/search.js: -------------------------------------------------------------------------------- 1 | const app = getApp() 2 | Page({ 3 | data:{ 4 | searchs:[], 5 | current:null, 6 | hidden:true, // 加载提示框是否显示 7 | scrollTop : 0, // 居顶部高度 8 | inputShowed: false, // 搜索输入框是否显示 9 | inputVal: "", // 搜索的内容 10 | histroyShowed:true //搜索记录 11 | }, 12 | bindKeyInput:function(e){ 13 | this.data.current = e.detail.value; 14 | }, 15 | showInput: function () { 16 | this.setData({ 17 | inputShowed: true, 18 | histroyShowed:false 19 | }); 20 | }, 21 | addItem:function(){ 22 | if(this.data.current != null){ 23 | // 将所有的后台业务交给app.js 24 | app.addItem(this.data.current) 25 | } 26 | this.setData({ 27 | inputVal:"" 28 | }) 29 | }, 30 | deleteItem:function(e){ 31 | var key = e.target.dataset.key; 32 | this.ref.child(key).remove(); 33 | }, 34 | 35 | onLoad:function(options){ 36 | this.ref = app.getTodoRef(); 37 | this.ref.on('child_added',function(snapshot,prkey){ 38 | var key = snapshot.key() 39 | var text = snapshot.val() 40 | // JSON结构 41 | var newItem = {key:key, text:text} 42 | this.data.searchs.push(newItem); 43 | this.setData({ 44 | searchs:this.data.searchs 45 | }) 46 | },this); 47 | this.ref.on('child_removed',function(snapshot){ 48 | var key = snapshot.key(); 49 | var index = this.data.searchs.findIndex( 50 | (item,index)=>{ 51 | if(item.key == key){ 52 | return true; 53 | } 54 | return false; 55 | }); 56 | if(index >= 0){ 57 | this.data.searchs.splice(index,1); 58 | this.setData({ 59 | searchs:this.data.searchs 60 | }) 61 | } 62 | },this) 63 | }, 64 | getUserInfo: function(e) { 65 | console.log(e) 66 | app.globalData.userInfo = e.detail.userInfo 67 | this.setData({ 68 | userInfo: e.detail.userInfo, 69 | hasUserInfo: true 70 | }) 71 | }, 72 | onReady:function(){ 73 | // 页面渲染完成 74 | }, 75 | onShow:function(){ 76 | // 页面显示 77 | }, 78 | 79 | // 点击叉叉icon 清除输入内容，同时清空关键字，并加载数据 80 | clearInput: function () { 81 | this.data.current = null; 82 | this.setData({ 83 | scrollTop : 0, 84 | inputVal: "" 85 | }); 86 | 87 | }, 88 | onHide:function(){ 89 | // 页面隐藏 90 | }, 91 | onUnload:function(){ 92 | // 页面关闭 93 | } 94 | }) -------------------------------------------------------------------------------- /pages/mine/mine.wxss: -------------------------------------------------------------------------------- 1 | /* pages/my/my.wxss */ 2 | .container{ 3 | overflow: hidden; 4 | } 5 | .userinfo { 6 | text-align: center; 7 | width: 100%; 8 | height: 30%; 9 | background: white; 10 | align-items: center; 11 | } 12 | .userinfo-avatar{ 13 | margin-top: 100rpx; 14 | border-radius: 90rpx; 15 | height: 130rpx; 16 | width: 130rpx; 17 | } 18 | .container { 19 | width: 100%; 20 | height: 100%; 21 | padding: 0; 22 | background: #f5f7f9; 23 | justify-content: unset; 24 | } 25 | 26 | .container .vip { 27 | width: 100%; 28 | height: auto; 29 | padding: 43rpx 0 37rpx 0; 30 | position: relative; 31 | background: #fff; 32 | border-top: 1rpx solid #e2e2e2; 33 | } 34 | .container .vip ::after{ 35 | content: ''; 36 | display: inline-block; 37 | width: 8px; 38 | height: 8px; 39 | border-top: 1px solid #656565; 40 | border-right: 1px solid #656565; 41 | transform: rotate(45deg); 42 | position: absolute; 43 | right: 20px; 44 | } 45 | .container .vip image { 46 | width: 52rpx; 47 | position: absolute; 48 | left: 36rpx; 49 | top: 41rpx; 50 | } 51 | .container .vip text{ 52 | display: block; 53 | font-size: 26rpx; 54 | margin-left: 119rpx; 55 | } 56 | .container .vip .h2 { 57 | font-size: 28rpx; 58 | line-height:52rpx; 59 | } 60 | 61 | .container .history { 62 | width: 100%; 63 | height: auto; 64 | margin: 36rpx 0 0 0; 65 | padding: 56rpx 0 56rpx 40rpx; 66 | font-size: 28rpx; 67 | font-weight: bold; 68 | background: #fff; 69 | border-bottom: 1rpx solid #e2e2e2; 70 | } 71 | .container .history ::after{ 72 | content: ''; 73 | display: inline-block; 74 | width: 8px; 75 | height: 8px; 76 | border-top: 1px solid #656565; 77 | border-right: 1px solid #656565; 78 | transform: rotate(45deg); 79 | position: absolute; 80 | right: 20px; 81 | 82 | } 83 | .container .play-list { 84 | width: 100%; 85 | height: auto; 86 | padding: 56rpx 0 56rpx 40rpx; 87 | font-size: 28rpx; 88 | font-weight: bold; 89 | background: #fff; 90 | } 91 | .container .play-list ::after{ 92 | content: ''; 93 | display: inline-block; 94 | width: 8px; 95 | height: 8px; 96 | border-top: 1px solid #656565; 97 | border-right: 1px solid #656565; 98 | transform: rotate(45deg); 99 | position: absolute; 100 | right: 20px; 101 | 102 | } 103 | .container .set{ 104 | width: 100%; 105 | height: auto; 106 | margin: 36rpx 0 0 0; 107 | padding: 56rpx 0 56rpx 40rpx; 108 | font-size: 28rpx; 109 | font-weight: bold; 110 | background: #fff; 111 | border-bottom: 1rpx solid #e2e2e2; 112 | } 113 | .container .set ::after{ 114 | content: ''; 115 | display: inline-block; 116 | width: 8px; 117 | height: 8px; 118 | border-top: 1px solid #656565; 119 | border-right: 1px solid #656565; 120 | transform: rotate(45deg); 121 | position: absolute; 122 | right: 20px; 123 | } -------------------------------------------------------------------------------- /pages/videos/videos.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 王者荣耀 6 | 快看 7 | 神剪辑 8 | 搞笑 9 | 10 | 11 | 12 | 13 | 14 | 15 | {{item.label}} > 16 | 17 | 18 | {{item.title}} 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | {{item.title}} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | {{item.title}} 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /pages/channel/channel.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 电视剧 5 | 综艺 6 | 电影 7 | 动漫 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | {{item.label}} > 16 | 17 | 18 | {{item.title}} 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | {{item.title}} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | {{item.title}} 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 胡歌 > 11 | 12 | 13 | 14 | 15 | 16 | 怪咖啪啪啪 17 | 劲爆，胡歌女友竟... 18 | 19 | 20 | 21 | 22 | 23 | 鲁豫有约 24 | 胡歌·破茧十年 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 可凡倾听 34 | 胡歌回忆车祸悲惨经历... 35 | 36 | 37 | 38 | 39 | 40 | 非常静距离 41 | 出道十年从花美男蜕变... 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 黄晓明 > 51 | 52 | 53 | 54 | 55 | 56 | 锦绣缘华丽冒险 57 | 陈乔恩变身全能女友 58 | 59 | 60 | 61 | 62 | 63 | 龙票 64 | 小明传龙票精神 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 风流少年唐伯虎 74 | 黄晓明演绎呆萌才子... 75 | 76 | 77 | 78 | 79 | 80 | 大汉天子 81 | 黄晓明的青葱岁月 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 赵丽颖 > 91 | 92 | 93 | 94 | 95 | 96 | 胭脂 97 | 赵丽颖变身民国美女... 98 | 99 | 100 | 101 | 102 | 103 | 吉祥天宝 104 | 小骨赵丽颖追爱金... 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 花千骨[DVD版] 114 | 霍建华赵丽颖师徒乱... 115 | 116 | 117 | 118 | 119 | 120 | 怪咖啪啪啪 121 | 艺人签霸王条款... 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ## 这个冬天，让腾讯视频带给你温暖 2 | 3 | 金秋之后，便是寒冬。2017年就要过去了，这一年承载了太多的记忆，一个腾讯视频demo，帮助我们记录下来这些或难过，或美好，或感动的瞬间。 4 | 5 | ### 一个仿腾讯视频的小程序： 6 | *** 7 | ### 开发工具： 8 | - 微信开发者工具 9 | - [小程序开发文档](https://mp.weixin.qq.com/) 10 | - [iconfont矢量图标库](http://www.iconfont.cn/collections)：可以找到合适的tabBar图标 11 | - [easy-mock](https://www.easy-mock.com/)：提供虚拟数据接口 12 | - [wilddog](www.wilddog.com)：实现毫秒级的实时数据同步功能，无需自己构建后端服务器 13 | *** 14 | 15 | 16 | ### 项目功能： 17 | #### 1.已经实现功能： 18 | - 首页界面的还原 19 | - 加载，刷新，跳转等基础事件 20 | - swiper， scroll等滑动事件 21 | - 利用easy-mock实现从后台获取数据等 22 | - 利用wilddog实现搜索历史记录，微信登录功能等 23 | 24 | #### 2.仍在努力的功能： 25 | - 精准搜索匹配 26 | - 评论，回复等功能 27 | - 观看历史功能 28 | 29 | *** 30 | ### 页面注册： 31 | "pages/index/index", //主页 32 | "pages/videos/videos", //短视频 33 | "pages/mine/mine", //我的 34 | "pages/search/search", //首页和频道页面链接的搜索界面 35 | "pages/channel/channel", //频道 36 | "pages/playing/playing", //播放界面 37 | *** 38 | ### 项目展示： 39 | #### 1.首页的展示： 40 | ![首页](https://user-gold-cdn.xitu.io/2017/12/10/16040949cfe5e8ee?w=402&h=693&f=gif&s=953096) 41 | 42 | *首页其实是比较好看的，美观大方，很可惜官方已经改版了* 43 | 44 | * 每一个swiper的背景和第一张图片是绑定的 45 | 46 | **index.wxml部分代码** 47 | 48 | 49 | 50 | **index.js部分代码** 51 | 52 | bannerList : [ 53 | { 54 | url :　"../../images/hu_1.png" 55 | },{ 56 | url : "../../images/huang_1.jpg" 57 | },{ 58 | url : "../../images/zhao_1.jpg" 59 | } 60 | ], 61 | 62 | 63 | #### 2.短视频，频道界面的展示： 64 | ![短视频](https://user-gold-cdn.xitu.io/2017/12/10/16040949d7a9e01c?w=402&h=693&f=gif&s=2067436) 65 | 66 | - 这里的数据是从easy-mock获得的 67 | - 这是我的[接口](https://www.easy-mock.com/mock/5a223177707056548f085eee/data/getTencentInfo),没有做很多，大家可以用来练练手，后续会增加的 68 | 69 | 70 | 71 | 72 | {{item.label}} > 73 | 74 | 75 | {{item.title}} 76 | 77 | 78 | 79 | 80 | 81 | - 因为数据都是图片，所以为了还原真实性，我用伪元素做了个三角形播放图标 82 | 83 | .picture ::before 84 | { 85 | position: absolute; 86 | border:11px solid transparent; 87 | border-left:17px solid #fff; 88 | content: ""; 89 | top: 100px; 90 | left: 180px; 91 | } 92 | 93 | 94 | #### 3.播放界面的展示： 95 | ![播放](https://user-gold-cdn.xitu.io/2017/12/10/16040949e18a8001?w=402&h=693&f=gif&s=3326870) 96 | 97 | 98 | 99 | 100 | #### 4.搜索界面的展示： 101 | ![搜索](https://user-gold-cdn.xitu.io/2017/12/10/16040949cf733fc6?w=402&h=693&f=gif&s=745979) 102 | 103 | * 搜索界面引用了weui样式 104 | * @import "./weui.wxss"; 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 120 | 121 | 122 | 123 | 124 | 125 | {{item.text}} 126 | 127 | 128 | 129 | * 隐藏了搜索记录和搜索框 130 | 131 | data:{ 132 | searchs:[], 133 | current:null, 134 | hidden:true, // 加载提示框是否显示 135 | scrollTop : 0, // 居顶部高度 136 | inputShowed: false, // 搜索输入框是否显示 137 | inputVal: "", // 搜索的内容 138 | histroyShowed:true //搜索记录 139 | } 140 | 141 | **关于wilddog** 142 | 143 | *利用野狗sdk，我们可以实现多种实时功能，能够在各个终端修改后台数据，消息传递毫秒可达，能够为小程序开发者们上线提供一个良好的帮助* 144 | 145 | *这是他的[官方文档](https://docs.wilddog.com/overview/index.html?_ga=1.129586255.2113090780.1512732019)* 146 | 147 | * 首先要导入wilddog-weapp-all.js 148 | 149 | var wilddog = require('wilddog-weapp-all'); 150 | * 引用创建的接口 151 | 152 | var config = { 153 | syncURL:'https://appid.wilddogio.com', 154 | authDomain:'appid.wilddog.com' 155 | } 156 | *appid为你创建的应用id* 157 | 158 | * wilddog是以key-value的形式存储数据，创建引用会定位到根节点。若要定位到子节点，只需在url后追加路径即可: 159 | ![wilddog](https://user-gold-cdn.xitu.io/2017/12/10/1604099a5d09d2e0?w=551&h=234&f=png&s=18257) 160 | 161 | * 利用野狗的child()方法获取子节点，达到删除和增加的功能 162 | 163 | 164 | 165 | addItem:function(){ 166 | if(this.data.current != null){ 167 | // 将所有的后台业务交给app.js 168 | app.addItem(this.data.current) 169 | } 170 | this.setData({ 171 | inputVal:"" 172 | }) 173 | }, 174 | deleteItem:function(e){ 175 | var key = e.target.dataset.key; 176 | this.ref.child(key).remove(); 177 | }, 178 | 179 | onLoad:function(options){ 180 | this.ref = app.getTodoRef(); 181 | this.ref.on('child_added',function(snapshot,prkey){ 182 | var key = snapshot.key() 183 | var text = snapshot.val() 184 | // JSON结构 185 | var newItem = {key:key, text:text} 186 | this.data.searchs.push(newItem); 187 | this.setData({ 188 | searchs:this.data.searchs 189 | }) 190 | },this); 191 | this.ref.on('child_removed',function(snapshot){ 192 | var key = snapshot.key(); 193 | var index = this.data.searchs.findIndex( 194 | (item,index)=>{ 195 | if(item.key == key){ 196 | return true; 197 | } 198 | return false; 199 | }); 200 | if(index >= 0){ 201 | this.data.searchs.splice(index,1); 202 | this.setData({ 203 | searchs:this.data.searchs 204 | }) 205 | } 206 | },this) 207 | } 208 | 209 | *** 210 | ### 一点心得： 211 | #### 1.遇到的问题： 212 | * 写完数据后发现才发现内容全都不见了： 213 | 214 | *小程序只支持http:// 服务请求* 215 | 216 | * 用手机测验的时候奇卡无比： 217 | 218 | *在样式swiper中加入这条代码就解决了* 219 | -webkit-overflow-scrolling : touch; 220 | 221 | * 在手机测验时，整个页面会随着滑动： 222 | 223 | *在样式中加入超出则隐藏* 224 | overflow:hidden; 225 | 226 | * 如果js部分出现问题了，那么就应该console一下关键数据，看看是否能够打印出来，然后慢慢排除 227 | 228 | 开发的时候遇到了一些问题，是需要慢慢琢磨的，多看文档，耐心解决。开动大脑，好的想法idea是非常重要的，优雅的编程，发散的思维，把你的想象力用代码来实现，是一件非常cooooool的事情。 229 | 230 | #### 2.几句闲话： 231 | 232 | 如果你想要改变世界，那么我们可以做个朋友。但如果你想要卖一辈子糖水，那么我们也可以做个朋友。因为写代码，只是为了交个朋友嘛。有任何问题，你可以通过以下方式找到我： 233 | 234 | - QQ邮箱：750746291@qq.com 235 | - [github](https://github.com/caicong0805/wxapp_tenVideo)源码，欢迎star 236 | - [个人主页](http://www.weaci.cn) 237 | *** 238 | 239 | ### 彩蛋： 240 | 最后送给大家demo里出现的《三分钟回顾2017》，谢谢支持，共勉。 241 | 242 | 245 | 246 | *** 247 | 248 | -------------------------------------------------------------------------------- /weui.wxss: -------------------------------------------------------------------------------- 1 | /*! 2 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss) 3 | * Copyright 2017 Tencent, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | page{line-height:1.6;font-family:-apple-system-font,Helvetica Neue,sans-serif}icon{vertical-align:middle}.weui-cells{position:relative;margin-top:1.17647059em;background-color:#fff;line-height:1.41176471;font-size:17px}.weui-cells:before{top:0;border-top:1rpx solid #d9d9d9}.weui-cells:after,.weui-cells:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#d9d9d9}.weui-cells:after{bottom:0;border-bottom:1rpx solid #d9d9d9}.weui-cells__title{margin-top:.77em;margin-bottom:.3em;padding-left:15px;padding-right:15px;color:#999;font-size:14px}.weui-cells_after-title{margin-top:0}.weui-cells__tips{margin-top:.3em;color:#999;padding-left:15px;padding-right:15px;font-size:14px}.weui-cell{padding:10px 15px;position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-cell:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #d9d9d9;color:#d9d9d9;left:15px}.weui-cell:first-child:before{display:none}.weui-cell_active{background-color:#ececec}.weui-cell_primary{-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start}.weui-cell__bd{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-cell__ft{text-align:right;color:#999}.weui-cell_access{color:inherit}.weui-cell__ft_in-access{padding-right:13px;position:relative}.weui-cell__ft_in-access:after{content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;-webkit-transform:matrix(.71,.71,-.71,.71,0,0);transform:matrix(.71,.71,-.71,.71,0,0);position:relative;top:-2px;position:absolute;top:50%;margin-top:-4px;right:2px}.weui-cell_link{color:#586c94;font-size:14px}.weui-cell_link:active{background-color:#ececec}.weui-cell_link:first-child:before{display:block}.weui-icon-radio{margin-left:3.2px;margin-right:3.2px}.weui-icon-checkbox_circle,.weui-icon-checkbox_success{margin-left:4.6px;margin-right:4.6px}.weui-check__label:active{background-color:#ececec}.weui-check{position:absolute;left:-9999px}.weui-check__hd_in-checkbox{padding-right:.35em}.weui-cell__ft_in-radio{padding-left:.35em}.weui-cell_input{padding-top:0;padding-bottom:0}.weui-label{width:105px;word-wrap:break-word;word-break:break-all}.weui-input{height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em}.weui-toptips{position:fixed;-webkit-transform:translateZ(0);transform:translateZ(0);top:0;left:0;right:0;padding:5px;font-size:14px;text-align:center;color:#fff;z-index:5000;word-wrap:break-word;word-break:break-all}.weui-toptips_warn{background-color:#e64340}.weui-textarea{display:block;width:100%}.weui-textarea-counter{color:#b2b2b2;text-align:right}.weui-cell_warn,.weui-textarea-counter_warn{color:#e64340}.weui-form-preview{position:relative;background-color:#fff}.weui-form-preview:before{top:0;border-top:1rpx solid #d9d9d9}.weui-form-preview:after,.weui-form-preview:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#d9d9d9}.weui-form-preview:after{bottom:0;border-bottom:1rpx solid #d9d9d9}.weui-form-preview__value{font-size:14px}.weui-form-preview__value_in-hd{font-size:26px}.weui-form-preview__hd{position:relative;padding:10px 15px;text-align:right;line-height:2.5em}.weui-form-preview__hd:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1rpx solid #d9d9d9;color:#d9d9d9;left:15px}.weui-form-preview__bd{padding:10px 15px;font-size:.9em;text-align:right;color:#999;line-height:2}.weui-form-preview__ft{position:relative;line-height:50px;display:-webkit-box;display:-webkit-flex;display:flex}.weui-form-preview__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #d5d5d6;color:#d5d5d6}.weui-form-preview__item{overflow:hidden}.weui-form-preview__label{float:left;margin-right:1em;min-width:4em;color:#999;text-align:justify;text-align-last:justify}.weui-form-preview__value{display:block;overflow:hidden;word-break:normal;word-wrap:break-word}.weui-form-preview__btn{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#3cc51f;text-align:center}.weui-form-preview__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #d5d5d6;color:#d5d5d6}.weui-form-preview__btn:first-child:after{display:none}.weui-form-preview__btn_active{background-color:#eee}.weui-form-preview__btn_default{color:#999}.weui-form-preview__btn_primary{color:#0bb20c}.weui-cell_select{padding:0}.weui-select{position:relative;padding-left:15px;padding-right:30px;height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em;border-right:1rpx solid #d9d9d9}.weui-select:before{content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;-webkit-transform:matrix(.71,.71,-.71,.71,0,0);transform:matrix(.71,.71,-.71,.71,0,0);position:relative;top:-2px;position:absolute;top:50%;right:15px;margin-top:-4px}.weui-select_in-select-after{padding-left:0}.weui-cell__bd_in-select-before,.weui-cell__hd_in-select-after{padding-left:15px}.weui-cell_vcode{padding-right:0}.weui-vcode-btn,.weui-vcode-img{margin-left:5px;height:2.58823529em;vertical-align:middle}.weui-vcode-btn{display:inline-block;padding:0 .6em 0 .7em;border-left:1px solid #e5e5e5;line-height:2.58823529em;font-size:17px;color:#3cc51f;white-space:nowrap}.weui-vcode-btn:active{color:#52a341}.weui-cell_switch{padding-top:6px;padding-bottom:6px}.weui-uploader__hd{display:-webkit-box;display:-webkit-flex;display:flex;padding-bottom:10px;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-uploader__title{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-uploader__info{color:#b2b2b2}.weui-uploader__bd{margin-bottom:-4px;margin-right:-9px;overflow:hidden}.weui-uploader__file{float:left;margin-right:9px;margin-bottom:9px}.weui-uploader__img{display:block;width:79px;height:79px}.weui-uploader__file_status{position:relative}.weui-uploader__file_status:before{content:" ";position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.5)}.weui-uploader__file-content{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#fff}.weui-uploader__input-box{float:left;position:relative;margin-right:9px;margin-bottom:9px;width:77px;height:77px;border:1px solid #d9d9d9}.weui-uploader__input-box:after,.weui-uploader__input-box:before{content:" ";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#d9d9d9}.weui-uploader__input-box:before{width:2px;height:39.5px}.weui-uploader__input-box:after{width:39.5px;height:2px}.weui-uploader__input-box:active{border-color:#999}.weui-uploader__input-box:active:after,.weui-uploader__input-box:active:before{background-color:#999}.weui-uploader__input{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;opacity:0}.weui-article{padding:20px 15px;font-size:15px}.weui-article__section{margin-bottom:1.5em}.weui-article__h1{font-size:18px;font-weight:400;margin-bottom:.9em}.weui-article__h2{font-size:16px;font-weight:400;margin-bottom:.34em}.weui-article__h3{font-weight:400;font-size:15px;margin-bottom:.34em}.weui-article__p{margin:0 0 .8em}.weui-msg{padding-top:36px;text-align:center}.weui-msg__link{display:inline;color:#586c94}.weui-msg__icon-area{margin-bottom:30px}.weui-msg__text-area{margin-bottom:25px;padding:0 20px}.weui-msg__title{margin-bottom:5px;font-weight:400;font-size:20px}.weui-msg__desc{font-size:14px;color:#999}.weui-msg__opr-area{margin-bottom:25px}.weui-msg__extra-area{margin-bottom:15px;font-size:14px;color:#999}@media screen and (min-height:438px){.weui-msg__extra-area{position:fixed;left:0;bottom:0;width:100%;text-align:center}}.weui-flex{display:-webkit-box;display:-webkit-flex;display:flex}.weui-flex__item{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-btn{margin-top:15px}.weui-btn:first-child{margin-top:0}.weui-btn-area{margin:1.17647059em 15px .3em}.weui-agree{display:block;padding:.5em 15px;font-size:13px}.weui-agree__text{color:#999}.weui-agree__link{display:inline;color:#586c94}.weui-agree__checkbox{position:absolute;left:-9999px}.weui-agree__checkbox-icon{position:relative;top:2px;display:inline-block;border:1px solid #d1d1d1;background-color:#fff;border-radius:3px;width:11px;height:11px}.weui-agree__checkbox-icon-check{position:absolute;top:1px;left:1px}.weui-footer{color:#999;font-size:14px;text-align:center}.weui-footer_fixed-bottom{position:fixed;bottom:.52em;left:0;right:0}.weui-footer__links{font-size:0}.weui-footer__link{display:inline-block;vertical-align:top;margin:0 .62em;position:relative;font-size:14px;color:#586c94}.weui-footer__link:before{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #c7c7c7;color:#c7c7c7;left:-.65em;top:.36em;bottom:.36em}.weui-footer__link:first-child:before{display:none}.weui-footer__text{padding:0 .34em;font-size:12px}.weui-grids{border-top:1rpx solid #d9d9d9;border-left:1rpx solid #d9d9d9;overflow:hidden}.weui-grid{position:relative;float:left;padding:20px 10px;width:33.33333333%;box-sizing:border-box;border-right:1rpx solid #d9d9d9;border-bottom:1rpx solid #d9d9d9}.weui-grid_active{background-color:#ececec}.weui-grid__icon{display:block;width:28px;height:28px;margin:0 auto}.weui-grid__label{margin-top:5px;display:block;text-align:center;color:#000;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.weui-loading{margin:0 5px;width:20px;height:20px;display:inline-block;vertical-align:middle;-webkit-animation:a 1s steps(12) infinite;animation:a 1s steps(12) infinite;background:transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;background-size:100%}.weui-loading.weui-loading_transparent{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E")}@-webkit-keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.weui-badge{display:inline-block;padding:.15em .4em;min-width:8px;border-radius:18px;background-color:#e64340;color:#fff;line-height:1.2;text-align:center;font-size:12px;vertical-align:middle}.weui-badge_dot{padding:.4em;min-width:0}.weui-loadmore{width:65%;margin:0.5em auto;line-height:1.6em;font-size:14px;text-align:center}.weui-loadmore__tips{display:inline-block;vertical-align:middle}.weui-loadmore_line{border-top:1px solid #e5e5e5;margin-top:2.4em}.weui-loadmore__tips_in-line{position:relative;top:-.9em;padding:0 .55em;background-color:#fff;color:#999}.weui-loadmore__tips_in-dot{position:relative;padding:0 .16em;width:4px;height:1.6em}.weui-loadmore__tips_in-dot:before{content:" ";position:absolute;top:50%;left:50%;margin-top:-1px;margin-left:-2px;width:4px;height:4px;border-radius:50%;background-color:#e5e5e5}.weui-panel{background-color:#fff;margin-top:10px;position:relative;overflow:hidden}.weui-panel:first-child{margin-top:0}.weui-panel:before{top:0;border-top:1rpx solid #e5e5e5}.weui-panel:after,.weui-panel:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#e5e5e5}.weui-panel:after{bottom:0;border-bottom:1rpx solid #e5e5e5}.weui-panel__hd{padding:14px 15px 10px;color:#999;font-size:13px;position:relative}.weui-panel__hd:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1rpx solid #e5e5e5;color:#e5e5e5;left:15px}.weui-media-box{padding:15px;position:relative}.weui-media-box:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #e5e5e5;color:#e5e5e5;left:15px}.weui-media-box:first-child:before{display:none}.weui-media-box__title{font-weight:400;font-size:17px;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;word-wrap:break-word;word-break:break-all}.weui-media-box__desc{color:#999;font-size:13px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.weui-media-box__info{margin-top:15px;padding-bottom:5px;font-size:13px;color:#cecece;line-height:1em;list-style:none;overflow:hidden}.weui-media-box__info__meta{float:left;padding-right:1em}.weui-media-box__info__meta_extra{padding-left:1em;border-left:1px solid #cecece}.weui-media-box__title_in-text{margin-bottom:8px}.weui-media-box_appmsg{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-media-box__thumb{width:100%;height:100%;vertical-align:top}.weui-media-box__hd_in-appmsg{margin-right:.8em;width:60px;height:60px;line-height:60px;text-align:center}.weui-media-box__bd_in-appmsg{-webkit-box-flex:1;-webkit-flex:1;flex:1;min-width:0}.weui-media-box_small-appmsg{padding:0}.weui-cells_in-small-appmsg{margin-top:0}.weui-cells_in-small-appmsg:before{display:none}.weui-progress{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.weui-progress__bar{-webkit-box-flex:1;-webkit-flex:1;flex:1}.weui-progress__opr{margin-left:15px;font-size:0}.weui-navbar{display:-webkit-box;display:-webkit-flex;display:flex;position:absolute;z-index:500;top:0;width:100%;border-bottom:1rpx solid #ededed}.weui-navbar__item{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;text-align:center;font-size:0;color:#999999}.weui-navbar__item.weui-bar__item_on{color:#f788ab}.weui-navbar__title{font-size:15px;max-width:8em;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.weui-tab{position:relative;height:100%}.weui-tab__panel{box-sizing:border-box;height:100%;padding-top:44px;overflow:auto;-webkit-overflow-scrolling:touch}.weui-search-bar{position:relative;padding:8px 10px;display:-webkit-box;display:-webkit-flex;display:flex;box-sizing:border-box;background-color:#efeff4;border-top:1rpx solid #d7d6dc;border-bottom:1rpx solid #d7d6dc}.weui-icon-search{margin-right:8px;font-size:inherit}.weui-icon-search_in-box{position:absolute;left:10px;top:7px}.weui-search-bar__text{display:inline-block;font-size:14px;vertical-align:middle}.weui-search-bar__form{position:relative;-webkit-box-flex:1;-webkit-flex:auto;flex:auto;border-radius:5px;background:#fff;border:1rpx solid #e6e6ea}.weui-search-bar__box{position:relative;padding-left:30px;padding-right:30px;width:100%;box-sizing:border-box;z-index:1}.weui-search-bar__input{height:28px;line-height:28px;font-size:14px}.weui-icon-clear{position:absolute;top:0;right:0;padding:7px 8px;font-size:0}.weui-search-bar__label{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:3px;text-align:center;color:#9b9b9b;background:#fff;line-height:28px}.weui-search-bar__cancel-btn{margin-left:10px;line-height:28px;color:#09bb07;white-space:nowrap} --------------------------------------------------------------------------------