提交 6431887c 编写于 作者: H hulinNeil

修改代码格式,增加问题反馈模版

上级 2a0d2f60
......@@ -3,35 +3,35 @@
onLaunch: function () {
console.log('App Launch');
//#ifdef APP-PLUS
/* 5+环境锁定屏幕方向 */
plus.screen.unlockOrientation(); //解除锁定
plus.screen.lockOrientation('portrait-primary'); //锁定
/* 5+环境升级提示 */
var server = "http://uni-app.dcloud.io/update"; //检查更新地址
var req = { //升级检测数据
"appid": plus.runtime.appid,
"version": plus.runtime.version,
"imei": plus.device.imei
};
uni.request({
url: server,
data: req,
success: (res) => {
console.log("success",res);
if (res.statusCode == 200 && res.data.isUpdate) {
let openUrl = plus.os.name === 'iOS' ? res.data.iOS : res.data.Android;
uni.showModal({ //提醒用户更新
title: '更新提示',
content: '是否选择更新',
success: (res) => {
if (res.confirm) {
plus.runtime.openURL(openUrl);
}
/* 5+环境锁定屏幕方向 */
plus.screen.unlockOrientation(); //解除锁定
plus.screen.lockOrientation('portrait-primary'); //锁定
/* 5+环境升级提示 */
var server = "http://uni-app.dcloud.io/update"; //检查更新地址
var req = { //升级检测数据
"appid": plus.runtime.appid,
"version": plus.runtime.version,
"imei": plus.device.imei
};
uni.request({
url: server,
data: req,
success: (res) => {
console.log("success", res);
if (res.statusCode == 200 && res.data.isUpdate) {
let openUrl = plus.os.name === 'iOS' ? res.data.iOS : res.data.Android;
uni.showModal({ //提醒用户更新
title: '更新提示',
content: '是否选择更新',
success: (res) => {
if (res.confirm) {
plus.runtime.openURL(openUrl);
}
})
}
}
})
}
})
}
})
//#endif
},
onShow: function () {
......
@font-face {
font-family: uniicons;
font-weight: normal;
font-style: normal;
src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
font-family: uniicons;
font-weight: normal;
font-style: normal;
src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
}
.uni-icon {
font-family: uniicons;
font-size: 48rpx;
font-weight: normal;
font-style: normal;
line-height: 1;
font-family: uniicons;
font-size: 48rpx;
font-weight: normal;
font-style: normal;
line-height: 1;
display: inline-block;
display: inline-block;
text-decoration: none;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
}
.uni-icon.uni-active {
color: #007aff;
color: #007aff;
}
.uni-icon-contact:before {
content: '\e100';
content: '\e100';
}
.uni-icon-person:before {
content: '\e101';
content: '\e101';
}
.uni-icon-personadd:before {
content: '\e102';
content: '\e102';
}
.uni-icon-contact-filled:before {
content: '\e130';
content: '\e130';
}
.uni-icon-person-filled:before {
content: '\e131';
content: '\e131';
}
.uni-icon-personadd-filled:before {
content: '\e132';
content: '\e132';
}
.uni-icon-phone:before {
content: '\e200';
content: '\e200';
}
.uni-icon-email:before {
content: '\e201';
content: '\e201';
}
.uni-icon-chatbubble:before {
content: '\e202';
content: '\e202';
}
.uni-icon-chatboxes:before {
content: '\e203';
content: '\e203';
}
.uni-icon-phone-filled:before {
content: '\e230';
content: '\e230';
}
.uni-icon-email-filled:before {
content: '\e231';
content: '\e231';
}
.uni-icon-chatbubble-filled:before {
content: '\e232';
content: '\e232';
}
.uni-icon-chatboxes-filled:before {
content: '\e233';
content: '\e233';
}
.uni-icon-weibo:before {
content: '\e260';
content: '\e260';
}
.uni-icon-weixin:before {
content: '\e261';
content: '\e261';
}
.uni-icon-pengyouquan:before {
content: '\e262';
content: '\e262';
}
.uni-icon-chat:before {
content: '\e263';
content: '\e263';
}
.uni-icon-qq:before {
content: '\e264';
content: '\e264';
}
.uni-icon-videocam:before {
content: '\e300';
content: '\e300';
}
.uni-icon-camera:before {
content: '\e301';
content: '\e301';
}
.uni-icon-mic:before {
content: '\e302';
content: '\e302';
}
.uni-icon-location:before {
content: '\e303';
content: '\e303';
}
.uni-icon-mic-filled:before,
.uni-icon-speech:before {
content: '\e332';
content: '\e332';
}
.uni-icon-location-filled:before {
content: '\e333';
content: '\e333';
}
.uni-icon-micoff:before {
content: '\e360';
content: '\e360';
}
.uni-icon-image:before {
content: '\e363';
content: '\e363';
}
.uni-icon-map:before {
content: '\e364';
content: '\e364';
}
.uni-icon-compose:before {
content: '\e400';
content: '\e400';
}
.uni-icon-trash:before {
content: '\e401';
content: '\e401';
}
.uni-icon-upload:before {
content: '\e402';
content: '\e402';
}
.uni-icon-download:before {
content: '\e403';
content: '\e403';
}
.uni-icon-close:before {
content: '\e404';
content: '\e404';
}
.uni-icon-redo:before {
content: '\e405';
content: '\e405';
}
.uni-icon-undo:before {
content: '\e406';
content: '\e406';
}
.uni-icon-refresh:before {
content: '\e407';
content: '\e407';
}
.uni-icon-star:before {
content: '\e408';
content: '\e408';
}
.uni-icon-plus:before {
content: '\e409';
content: '\e409';
}
.uni-icon-minus:before {
content: '\e410';
content: '\e410';
}
.uni-icon-circle:before,
.uni-icon-checkbox:before {
content: '\e411';
content: '\e411';
}
.uni-icon-close-filled:before,
.uni-icon-clear:before {
content: '\e434';
content: '\e434';
}
.uni-icon-refresh-filled:before {
content: '\e437';
content: '\e437';
}
.uni-icon-star-filled:before {
content: '\e438';
content: '\e438';
}
.uni-icon-plus-filled:before {
content: '\e439';
content: '\e439';
}
.uni-icon-minus-filled:before {
content: '\e440';
content: '\e440';
}
.uni-icon-circle-filled:before {
content: '\e441';
content: '\e441';
}
.uni-icon-checkbox-filled:before {
content: '\e442';
content: '\e442';
}
.uni-icon-closeempty:before {
content: '\e460';
content: '\e460';
}
.uni-icon-refreshempty:before {
content: '\e461';
content: '\e461';
}
.uni-icon-reload:before {
content: '\e462';
content: '\e462';
}
.uni-icon-starhalf:before {
content: '\e463';
content: '\e463';
}
.uni-icon-spinner:before {
content: '\e464';
content: '\e464';
}
.uni-icon-spinner-cycle:before {
content: '\e465';
content: '\e465';
}
.uni-icon-search:before {
content: '\e466';
content: '\e466';
}
.uni-icon-plusempty:before {
content: '\e468';
content: '\e468';
}
.uni-icon-forward:before {
content: '\e470';
content: '\e470';
}
.uni-icon-back:before,
.uni-icon-left-nav:before {
content: '\e471';
content: '\e471';
}
.uni-icon-checkmarkempty:before {
content: '\e472';
content: '\e472';
}
.uni-icon-home:before {
content: '\e500';
content: '\e500';
}
.uni-icon-navigate:before {
content: '\e501';
content: '\e501';
}
.uni-icon-gear:before {
content: '\e502';
content: '\e502';
}
.uni-icon-paperplane:before {
content: '\e503';
content: '\e503';
}
.uni-icon-info:before {
content: '\e504';
content: '\e504';
}
.uni-icon-help:before {
content: '\e505';
content: '\e505';
}
.uni-icon-locked:before {
content: '\e506';
content: '\e506';
}
.uni-icon-more:before {
content: '\e507';
content: '\e507';
}
.uni-icon-flag:before {
content: '\e508';
content: '\e508';
}
.uni-icon-home-filled:before {
content: '\e530';
content: '\e530';
}
.uni-icon-gear-filled:before {
content: '\e532';
content: '\e532';
}
.uni-icon-info-filled:before {
content: '\e534';
content: '\e534';
}
.uni-icon-help-filled:before {
content: '\e535';
content: '\e535';
}
.uni-icon-more-filled:before {
content: '\e537';
content: '\e537';
}
.uni-icon-settings:before {
content: '\e560';
content: '\e560';
}
.uni-icon-list:before {
content: '\e562';
content: '\e562';
}
.uni-icon-bars:before {
content: '\e563';
content: '\e563';
}
.uni-icon-loop:before {
content: '\e565';
content: '\e565';
}
.uni-icon-paperclip:before {
content: '\e567';
content: '\e567';
}
.uni-icon-eye:before {
content: '\e568';
content: '\e568';
}
.uni-icon-arrowup:before {
content: '\e580';
content: '\e580';
}
.uni-icon-arrowdown:before {
content: '\e581';
content: '\e581';
}
.uni-icon-arrowleft:before {
content: '\e582';
content: '\e582';
}
.uni-icon-arrowright:before {
content: '\e583';
content: '\e583';
}
.uni-icon-arrowthinup:before {
content: '\e584';
content: '\e584';
}
.uni-icon-arrowthindown:before {
content: '\e585';
content: '\e585';
}
.uni-icon-arrowthinleft:before {
content: '\e586';
content: '\e586';
}
.uni-icon-arrowthinright:before {
content: '\e587';
content: '\e587';
}
.uni-icon-pulldown:before {
content: '\e588';
content: '\e588';
}
......@@ -2,7 +2,6 @@
font-family: uniicons;
font-weight: normal;
font-style: normal;
src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
}
......@@ -10,8 +9,6 @@
/*通用*/
.uni-flex {
......@@ -149,10 +146,6 @@
/*折叠面板*/
.uni-collapse-content {
......@@ -168,11 +161,6 @@
/*卡片视图*/
.uni-card {
......@@ -268,6 +256,11 @@
/*列表*/
.uni-list {
......@@ -368,6 +361,7 @@
transform: scaleY(.5);
background-color: #c8c7cc;
}
.uni-list-cell-divider:after {
position: absolute;
right: 0;
......@@ -486,8 +480,6 @@
/*图文列表*/
.uni-media-list {
......@@ -541,10 +533,6 @@
}
/*九宫格*/
.uni-grid-9 {
......@@ -591,9 +579,6 @@
}
/*上传*/
.uni-uploader {
......@@ -677,3 +662,85 @@
height: 100%;
opacity: 0;
}
/*问题反馈*/
.feedback-title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20rpx;
color: #8f8f94;
font-size: 28rpx;
}
.feedback-star-view.feedback-title {
justify-content: flex-start;
margin: 0;
}
.feedback-quick {
position: relative;
padding-right: 40rpx;
}
.feedback-quick:after {
font-family: uniicons;
font-size: 40rpx;
content: '\e581';
position: absolute;
right: 0;
top: 50%;
color: #bbb;
transform: translateY(-50%);
}
.feedback-body {
background: #fff;
}
.feedback-textare {
height: 200rpx;
font-size: 34rpx;
padding: 20rpx 30rpx 0;
}
.feedback-input {
height: 80rpx;
font-size: 34rpx;
padding-left: 20rpx;
}
.feedback-uploader {
padding: 22rpx 20rpx;
}
.feedback-star {
font-family: uniicons;
font-size: 40rpx;
margin-left: 6rpx;
}
.feedback-star-view {
margin-left: 20rpx;
}
.feedback-star:after {
content: '\e408';
}
.feedback-star.active {
color: #FFB400;
}
.feedback-star.active:after {
content: '\e438';
}
.feedback-submit {
background: #007AFF;
color: #FFFFFF;
margin: 20rpx;
}
function formatTime(time) {
if (typeof time !== 'number' || time < 0) {
return time
}
if (typeof time !== 'number' || time < 0) {
return time
}
var hour = parseInt(time / 3600)
time = time % 3600
var minute = parseInt(time / 60)
time = time % 60
var second = time
var hour = parseInt(time / 3600)
time = time % 3600
var minute = parseInt(time / 60)
time = time % 60
var second = time
return ([hour, minute, second]).map(function (n) {
n = n.toString()
return n[1] ? n : '0' + n
}).join(':')
return ([hour, minute, second]).map(function (n) {
n = n.toString()
return n[1] ? n : '0' + n
}).join(':')
}
function formatLocation(longitude, latitude) {
if (typeof longitude === 'string' && typeof latitude === 'string') {
longitude = parseFloat(longitude)
latitude = parseFloat(latitude)
}
if (typeof longitude === 'string' && typeof latitude === 'string') {
longitude = parseFloat(longitude)
latitude = parseFloat(latitude)
}
longitude = longitude.toFixed(2)
latitude = latitude.toFixed(2)
longitude = longitude.toFixed(2)
latitude = latitude.toFixed(2)
return {
longitude: longitude.toString().split('.'),
latitude: latitude.toString().split('.')
}
return {
longitude: longitude.toString().split('.'),
latitude: latitude.toString().split('.')
}
}
var dateUtils = {
UNITS: {
......@@ -65,8 +65,9 @@ var dateUtils = {
return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
}
};
module.exports = {
formatTime: formatTime,
formatLocation: formatLocation,
dateUtils:dateUtils
formatTime: formatTime,
formatLocation: formatLocation,
dateUtils: dateUtils
}
{
"name": "demo",
"appid": "__uni123213213",
"name": "hello uni-app",
"appid": "__UNI__123213213",
"description": "应用描述",
"icons": [{
"sizes": "分辨率,192x192",
"src": "图片路径"
}],
"versionName": "版本名称",
"versionCode": "版本号",
"versionName": "1.0.0",
"versionCode": "100",
"app-plus": { // 5+App特有相关
"modules": {},
"distribute": {
"android": {},
"ios": {},
"sdkConfigs": {}
}
},
"quickapp": { // 快应用特有相关
},
"mp-weixin": { // 小程序特有相关
}
}
{
"pages": [
"pages": [ //pages数组中第一项表示应用启动页
{
"path": "pages/component/index",
"style": {
......@@ -10,7 +10,7 @@
"style": {
"navigationBarTitleText": "接口"
}
},{
}, {
"path": "pages/template/index",
"style": {
"navigationBarTitleText": "模版"
......@@ -41,12 +41,6 @@
"navigationBarTitleText": "text"
}
},
// {
// "path": "pages/component/icon/index",
// "style": {
// "navigationBarTitleText": "icon"
// }
// },
{
"path": "pages/component/progress/index",
"style": {
......@@ -233,7 +227,7 @@
"style": {
"navigationBarTitleText": "监听加速度计数据"
}
},{
}, {
"path": "pages/API/on-accelerometer-change/shake",
"style": {
"navigationBarTitleText": "摇一摇"
......@@ -419,6 +413,11 @@
"style": {
"navigationBarTitleText": "详情"
}
}, {
"path": "platforms/app-plus/feedback/index",
"style": {
"navigationBarTitleText": "问题反馈"
}
}
],
"globalStyle": {
......@@ -432,23 +431,21 @@
"selectedColor": "#007AFF",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/component/index",
"iconPath": "static/component.png",
"selectedIconPath": "static/componentHL.png",
"text": "组件"
}, {
"pagePath": "pages/API/index",
"iconPath": "static/api.png",
"selectedIconPath": "static/apiHL.png",
"text": "接口"
}, {
"pagePath": "pages/template/index",
"iconPath": "static/template.png",
"selectedIconPath": "static/templateHL.png",
"text": "模版"
}
]
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/component.png",
"selectedIconPath": "static/componentHL.png",
"text": "组件"
}, {
"pagePath": "pages/API/index",
"iconPath": "static/api.png",
"selectedIconPath": "static/apiHL.png",
"text": "接口"
}, {
"pagePath": "pages/template/index",
"iconPath": "static/template.png",
"selectedIconPath": "static/templateHL.png",
"text": "模版"
}]
}
}
......@@ -6,11 +6,11 @@
<button type="default" @tap="actionSheetTap">弹出action sheet</button>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
import pageHead from '../../../components/page-head.vue';
export default {
data() {
return {
......@@ -21,7 +21,7 @@
actionSheetTap() {
uni.showActionSheet({
itemList: ['item1', 'item2', 'item3', 'item4'],
success:(e) => {
success: (e) => {
console.log(e.tapIndex)
}
})
......@@ -32,4 +32,3 @@
}
}
</script>
......@@ -19,12 +19,12 @@
</scroll-view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
import pageHead from '../../../components/page-head.vue';
export default {
data() {
return {
......@@ -91,7 +91,7 @@
},
components: {
pageHead
}
}
</script>
......
......@@ -29,19 +29,19 @@
<view class="page-body-button"></view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
var util = require('../../../common/util.js')
import pageHead from '../../../components/page-head.vue';
var util = require('../../../common/util.js');
export default {
data() {
return {
title: 'backgroundAudio',
bgAudioMannager:null,
dataUrl:'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/friendship.mp3',
bgAudioMannager: null,
dataUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/friendship.mp3',
playing: false,
playTime: 0,
formatedPlayTime: '00:00:00'
......@@ -50,38 +50,38 @@
onLoad: function () {
const bgAudioMannager = uni.getBackgroundAudioManager();
bgAudioMannager.title = '友谊地久天长';
bgAudioMannager.singer = '群星';
bgAudioMannager.singer = '群星';
bgAudioMannager.coverImgUrl = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/friendship.jpg';
bgAudioMannager.onPlay(()=>{
bgAudioMannager.onPlay(() => {
console.log("开始播放");
this.playing = true;
})
bgAudioMannager.onPause(()=>{
bgAudioMannager.onPause(() => {
console.log("暂停播放");
this.playing = false;
})
bgAudioMannager.onEnded(()=>{
bgAudioMannager.onEnded(() => {
this.playing = false;
this.playTime = 0;
this.formatedPlayTime = util.formatTime(0);
})
bgAudioMannager.onTimeUpdate((e)=>{
if(Math.floor(this.bgAudioMannager.currentTime) > Math.floor(this.playTime)){
bgAudioMannager.onTimeUpdate((e) => {
if (Math.floor(this.bgAudioMannager.currentTime) > Math.floor(this.playTime)) {
this.formatedPlayTime = util.formatTime(Math.floor(this.bgAudioMannager.currentTime));
}
this.playTime = this.bgAudioMannager.currentTime;
})
this.bgAudioMannager = bgAudioMannager;
},
methods: {
play: function (res) {
if(!this.bgAudioMannager.src){
if (!this.bgAudioMannager.src) {
this.bgAudioMannager.startTime = this.playTime;
this.bgAudioMannager.src = this.dataUrl;
}else{
} else {
this.bgAudioMannager.seek(this.playTime);
this.bgAudioMannager.play();
}
......@@ -110,9 +110,11 @@
width: 150rpx;
height: 150rpx;
}
.page-body-text{
.page-body-text {
padding: 0 30rpx;
}
.page-body-wrapper {
margin-top: 0;
}
......
......@@ -12,13 +12,12 @@
</scroll-view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
var context = null
import pageHead from '../../../components/page-head.vue';
var context = null;
export default {
data() {
return {
......@@ -34,8 +33,8 @@
context = uni.createCanvasContext('canvas')
},
methods: {
handleCanvasButton:function(name){
this[name]()
handleCanvasButton: function (name) {
this[name]()
},
rotate: function () {
context.beginPath()
......@@ -323,7 +322,7 @@
},
components: {
pageHead
}
}
</script>
......
......@@ -22,21 +22,21 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
var util = require('../../../common/util.js')
var formatLocation = util.formatLocation
import pageHead from '../../../components/page-head.vue';
var util = require('../../../common/util.js');
var formatLocation = util.formatLocation;
export default {
data() {
return {
title: 'chooseLocation',
hasLocation: false,
location:{},
locationAddress:''
location: {},
locationAddress: ''
}
},
methods: {
......@@ -46,8 +46,8 @@
success: function (res) {
console.log('.......' + res)
that.hasLocation = true,
that.location = formatLocation(res.longitude, res.latitude),
that.locationAddress = res.address
that.location = formatLocation(res.longitude, res.latitude),
that.locationAddress = res.address
}
})
},
......@@ -57,7 +57,7 @@
},
components: {
pageHead
}
}
</script>
......@@ -67,8 +67,9 @@
padding-bottom: 0;
height: 440rpx;
}
.btn-chooselocation{
background-color:#007aff;
.btn-chooselocation {
background-color: #007aff;
color: #ffffff;
}
</style>
......@@ -14,12 +14,12 @@
</view>
</block>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
import pageHead from '../../../components/page-head.vue';
export default {
data() {
return {
......@@ -27,8 +27,8 @@
imageSrc: ''
}
},
onUnload(){
this.imageSrc = '';
onUnload() {
this.imageSrc = '';
},
methods: {
downloadImage: function () {
......@@ -60,8 +60,9 @@
margin: 0 75rpx;
}
button{
background-color:#007aff;
color: #ffffff;
button {
background-color: #007aff;
color: #ffffff;
}
</style>
......@@ -24,12 +24,12 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -95,7 +95,7 @@
},
components: {
pageHead
}
}
</script>
......@@ -116,8 +116,9 @@
align-items: center;
justify-content: center;
}
.btn-savefile{
background-color:#007aff;
.btn-savefile {
background-color: #007aff;
color: #ffffff;
}
</style>
......@@ -21,20 +21,20 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
var util = require('../../../common/util.js')
var formatLocation = util.formatLocation
import pageHead from '../../../components/page-head.vue';
var util = require('../../../common/util.js');
var formatLocation = util.formatLocation;
export default {
data() {
return {
title: 'getLocation',
hasLocation: false,
location:{}
location: {}
}
},
methods: {
......@@ -43,7 +43,7 @@
uni.getLocation({
success: function (res) {
that.hasLocation = true,
that.location = formatLocation(res.longitude, res.latitude)
that.location = formatLocation(res.longitude, res.latitude)
}
})
},
......@@ -53,7 +53,7 @@
},
components: {
pageHead
}
}
</script>
......@@ -77,9 +77,9 @@
.page-body-text-location text {
margin: 10rpx;
}
.btn-getlocation{
background-color:#007aff;
.btn-getlocation {
background-color: #007aff;
color: #ffffff;
}
</style>
......@@ -19,12 +19,12 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -38,18 +38,18 @@
uni.getNetworkType({
success: (res) => {
console.log(res)
this.hasNetworkType = true,this.networkType = res.subtype || res.networkType
this.hasNetworkType = true, this.networkType = res.subtype || res.networkType
}
})
},
clear: function () {
this.hasNetworkType = false,
this.networkType = ''
this.networkType = ''
}
},
components: {
pageHead
}
}
</script>
......@@ -63,8 +63,9 @@
font-size: 80rpx;
font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
}
.btn-load{
background-color:#007aff;
color: #ffffff;
.btn-load {
background-color: #007aff;
color: #ffffff;
}
</style>
......@@ -58,12 +58,11 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -88,11 +87,12 @@
<style>
@import "../../../common/uni.css";
button{
background-color:#007aff;
button {
background-color: #007aff;
color: #ffffff;
}
.uni-label {
width: 105px;
width: 105px;
}
</style>
......@@ -20,7 +20,6 @@
</view>
</view>
</view>
</view>
</template>
<script>
......@@ -29,7 +28,7 @@
mapMutations
} from 'vuex'
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -40,35 +39,35 @@
},
computed: {
...mapState({
loginProvider:state => state.loginProvider
loginProvider: state => state.loginProvider
})
},
onLoad: function () {},
methods: {
getUserInfo(){//获取用户信息api在微信小程序可直接使用,在5+app里面需要先登录才能调用
getUserInfo() { //获取用户信息api在微信小程序可直接使用,在5+app里面需要先登录才能调用
uni.getUserInfo({
provider:this.loginProvider,
provider: this.loginProvider,
success: (e) => {
console.log("得到用户信息",e);
console.log("得到用户信息", e);
this.hasUserInfo = true;
this.userInfo = e.userInfo
},
fail:(e) => {
console.log("fail",e);
fail: (e) => {
console.log("fail", e);
let content = e.errMsg;
if(~e.errMsg.indexOf("uni.login")){
content = "请在登录页面完成登录操作"
if (~e.errMsg.indexOf("uni.login")) {
content = "请在登录页面完成登录操作"
}
uni.showModal({
content:content,
showCancel:false
content: content,
showCancel: false
})
}
})
},
clear: function () {
this.hasUserInfo = false,
this.userInfo = {}
this.userInfo = {}
}
},
components: {
......@@ -93,9 +92,9 @@
margin-top: 20rpx;
font-size: 38rpx;
}
.userinfo-btn{
background-color:#007aff;
color: #ffffff;
.userinfo-btn {
background-color: #007aff;
color: #ffffff;
}
</style>
......@@ -64,7 +64,6 @@
</view>
</form>
</view>
</view>
</template>
<script>
......@@ -141,5 +140,4 @@
.cell-pd {
padding: 22rpx 30rpx;
}
</style>
......@@ -2,21 +2,23 @@
<view class="index">
<view class="index-hd">
<image class="index-logo" src="../../static/apiIndex.png"></image>
<view class="page-section-title" >以下将演示uni-app接口能力,具体属性参数详见uni-app开发文档。</view>
<view class="page-section-title">以下将演示uni-app接口能力,具体属性参数详见uni-app开发文档。</view>
</view>
<view class="uni-card" v-for="(list,index) in lists" :key="index">
<view class="uni-list" >
<view class="uni-list-cell uni-collapse">
<view class="uni-list-cell-navigate uni-navigate-bottom" hover-class="uni-list-cell-hover" :class="list.open ? 'uni-active' : ''" @click="trigerCollapse(index)">
{{list.name}}
</view>
<view class="uni-list uni-collapse" :class="list.open ? 'uni-active' : ''">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key) in list.pages" :key="key" :url="item.url" @click="goDetailPage(item.url)">
<view class="uni-list-cell-navigate uni-navigate-right"> {{item.name}} </view>
</view>
</view>
</view>
</view>
<view class="uni-list">
<view class="uni-list-cell uni-collapse">
<view class="uni-list-cell-navigate uni-navigate-bottom" hover-class="uni-list-cell-hover" :class="list.open ? 'uni-active' : ''"
@click="trigerCollapse(index)">
{{list.name}}
</view>
<view class="uni-list uni-collapse" :class="list.open ? 'uni-active' : ''">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key) in list.pages" :key="key" :url="item.url"
@click="goDetailPage(item.url)">
<view class="uni-list-cell-navigate uni-navigate-right"> {{item.name}} </view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
......@@ -97,16 +99,15 @@
name: '网络',
open: false,
pages: [{
name: '发起一个请求',
url: 'request/index'
}, {
name: '上传文件',
url: 'upload-file/index'
}, {
name: '下载文件',
url: 'download-file/index'
}
]
name: '发起一个请求',
url: 'request/index'
}, {
name: '上传文件',
url: 'upload-file/index'
}, {
name: '下载文件',
url: 'download-file/index'
}]
}, {
id: 'media',
name: '媒体',
......@@ -150,6 +151,7 @@
url: 'storage/index'
}]
}]
//#ifdef MP-WEIXIN
let list0PushItem_WEIXIN = [{
name: '客服消息',
......@@ -160,12 +162,21 @@
}]
list[0].pages.splice(list[0].pages.length, 0, ...list0PushItem_WEIXIN)
//#endif
//#ifdef APP-PLUS
let list0PushItem = [{ name: '分享',url: '/platforms/app-plus/share/index'}]
let list0PushItem = [{
name: '分享',
url: '/platforms/app-plus/share/index'
}]
list[0].pages.splice(list[0].pages.length, 0, ...list0PushItem)
let list2PushItem = [{name: '监听距离传感器',url: '/platforms/app-plus/proximity/index'},{name: '监听方向传感器',url: '/platforms/app-plus/orientation/index'}]
list[2].pages.splice(list[2].pages.length,0,...list2PushItem);
let list2PushItem = [{
name: '监听距离传感器',
url: '/platforms/app-plus/proximity/index'
}, {
name: '监听方向传感器',
url: '/platforms/app-plus/orientation/index'
}]
list[2].pages.splice(list[2].pages.length, 0, ...list2PushItem);
let plusItem = [{
id: 'speech',
name: '语音',
......@@ -177,20 +188,21 @@
}, {
id: 'push',
name: '推送',
open:false,
pages:[{
open: false,
pages: [{
name: '推送',
url: '/platforms/app-plus/push/index'
}]
}]
list.splice(list.length, 0, ...plusItem)
//#endif
return {
lists: list
}
},
methods: {
trigerCollapse(e){
trigerCollapse(e) {
for (let i = 0, len = this.lists.length; i < len; ++i) {
if (e === i) {
this.lists[i].open = !this.lists[i].open;
......@@ -199,26 +211,29 @@
}
}
},
goDetailPage(e){
let url = ~e.indexOf('platform') ? e :'/pages/API/' + e;
goDetailPage(e) {
let url = ~e.indexOf('platform') ? e : '/pages/API/' + e;
uni.navigateTo({
url: url
})
}
}
}
</script>
<style>
@import "../../common/uni.css";
.uni-card{
box-shadow: none;
.uni-card {
box-shadow: none;
}
.uni-list:after{
height: 0;
.uni-list:after {
height: 0;
}
.uni-list:before{
height: 0;
.uni-list:before {
height: 0;
}
</style>
......@@ -9,11 +9,10 @@
</block>
<block v-if="hasLogin === false">
<text class="page-body-text">每个帐号仅需登录一次</text>
<button class="page-body-button" v-for="(value,key) in providerList" @tap="bindLogin(value)" :key="key">{{value.name}}</button>
<button class="page-body-button" v-for="(value,key) in providerList" @tap="bindLogin(value)" :key="key">{{value.name}}</button>
</block>
</view>
</view>
</view>
</template>
<script>
......@@ -22,12 +21,12 @@
mapMutations
} from 'vuex'
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
title: 'login',
providerList:[]
providerList: []
}
},
computed: {
......@@ -35,23 +34,35 @@
},
onLoad() {
uni.getProvider({
service:"oauth",
service: "oauth",
success: (e) => {
this.providerList = e.provider.map((value) => {
switch (value) {
case 'weixin':
return {name:'微信登录',id:value}
return {
name: '微信登录',
id: value
}
case 'qq':
return {name:'QQ登录',id:value}
return {
name: 'QQ登录',
id: value
}
case 'sinaweibo':
return {name:'新浪微博登录',id:value}
return {
name: '新浪微博登录',
id: value
}
case 'xiaomi':
return {name:'小米登录',id:value}
return {
name: '小米登录',
id: value
}
}
})
},
fail:(e) => {
console.log("获取登录通道失败",e);
fail: (e) => {
console.log("获取登录通道失败", e);
}
});
},
......@@ -59,13 +70,13 @@
...mapMutations(['login']),
bindLogin(e) {
uni.login({
provider:e.id,
provider: e.id,
success: (res) => {
console.log("登录",res);
this.login(e.id);//改变保存在store里的登录状态
console.log("登录", res);
this.login(e.id); //改变保存在store里的登录状态
},
fail:(e) => {
console.log("fail",e);
fail: (e) => {
console.log("fail", e);
}
})
}
......@@ -104,9 +115,9 @@
.page-body-button {
width: 100%;
}
button{
background-color:#007aff;
color: #ffffff;
button {
background-color: #007aff;
color: #ffffff;
}
</style>
......@@ -6,16 +6,15 @@
<view class="desc">请在下方输入电话号码</view>
<input class="input" type="number" name="input" @input="bindInput" />
<view class="btn-area">
<button @tap="makePhoneCall" :disabled="disabled">拨打</button>
<button @tap="makePhoneCall" :disabled="disabled">拨打</button>
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -44,7 +43,7 @@
},
components: {
pageHead
}
}
</script>
......@@ -72,9 +71,9 @@
.btn-area {
padding: 0;
}
button{
background-color:#007aff;
color: #ffffff;
button {
background-color: #007aff;
color: #ffffff;
}
</style>
......@@ -7,12 +7,11 @@
<button type="default" @tap="noTitlemodalTap">无标题的modal</button>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -40,7 +39,7 @@
},
components: {
pageHead
}
}
</script>
......@@ -7,12 +7,11 @@
<button @tap="hideNavigationBarLoading">隐藏加载动画</button>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -29,14 +28,14 @@
},
components: {
pageHead
}
}
</script>
<style>
.btn-load{
background-color:#007aff;
color: #ffffff;
.btn-load {
background-color: #007aff;
color: #ffffff;
}
</style>
......@@ -8,12 +8,11 @@
<button @tap="redirectTo">在当前页面打开</button>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -37,7 +36,7 @@
},
components: {
pageHead
}
}
</script>
......@@ -3,8 +3,8 @@
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<view class="page-section-spacing" >
<button class="shake" @tap="shake">摇一摇</button>
<view class="page-section-spacing">
<button class="shake" @tap="shake">摇一摇</button>
</view>
<view class="page-section-spacing">
<button class="btn" @tap="watchAcce">监听设备的加速度变化</button>
......@@ -29,22 +29,23 @@
value: ''
}
},
onUnload(){
uni.stopAccelerometer();
onUnload() {
uni.stopAccelerometer();
},
methods: {
watchAcce() {
uni.onAccelerometerChange((res) => {
this.value = "监听设备的加速度变化:\n" + "Z轴:" + res.x.toFixed(2) + "\nY轴:" + res.y.toFixed(2) + "\nZ轴:" + res.z.toFixed(2);
this.value = "监听设备的加速度变化:\n" + "Z轴:" + res.x.toFixed(2) + "\nY轴:" + res.y.toFixed(2) +
"\nZ轴:" + res.z.toFixed(2);
})
},
stopAcce() {
uni.stopAccelerometer()
},
shake(){
uni.navigateTo({
url: 'shake'
})
shake() {
uni.navigateTo({
url: 'shake'
})
}
},
components: {
......@@ -54,16 +55,18 @@
</script>
<style>
.btn{
background-color: #007aff;
color: #ffffff;
.btn {
background-color: #007aff;
color: #ffffff;
}
.shake{
.shake {
background-color: #FFCC33;
color: #ffffff;
margin-bottom: 50rpx;
}
textarea{
border: 2rpx solid #7A7E83;
textarea {
border: 2rpx solid #7A7E83;
}
</style>
<template>
<view class="root" :style="{backgroundImage:'url('+img+')'}">
<view :class="[show ? 'up' : '','shake-up']">
<image mode="aspectFit" src="../../../static/shake/shakeup.png"></image>
</view>
<view :class="[show ? 'down' : '','shake-down']">
<image mode="aspectFit" src="../../../static/shake/shakedown.png"></image>
</view>
<view :class="[show ? 'up' : '','shake-up']">
<image mode="aspectFit" src="../../../static/shake/shakeup.png"></image>
</view>
<view :class="[show ? 'down' : '','shake-down']">
<image mode="aspectFit" src="../../../static/shake/shakedown.png"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
img: '../../../static/shake/1.jpg',
show:false
show: false
}
},
onLoad: function () {
let music = uni.createInnerAudioContext();
music.src = '../../../static/shake/shake.wav';
let index = 1,t =null;
uni.onAccelerometerChange((res) => {
if(Math.abs(res.x) + Math.abs(res.y) + Math.abs(res.z) > 20 && !this.show){
music.play();
setTimeout(()=>{
index++;
if(index > 4){
index = 1
}
this.img = '../../../static/shake/' + index + '.jpg';
},2000);
this.show = true;
if(t){
clearTimeout(t);
let music = uni.createInnerAudioContext();
music.src = '../../../static/shake/shake.wav';
let index = 1,
t = null;
uni.onAccelerometerChange((res) => {
if (Math.abs(res.x) + Math.abs(res.y) + Math.abs(res.z) > 20 && !this.show) {
music.play();
setTimeout(() => {
index++;
if (index > 4) {
index = 1
}
this.img = '../../../static/shake/' + index + '.jpg';
}, 2000);
this.show = true;
if (t) {
clearTimeout(t);
}
t = setTimeout(() => {
t = null;
this.show = false;
}, 600)
}
t = setTimeout(() => {
t = null;
this.show = false;
},600)
}
})
})
},
onUnload(){
this.show = false;
uni.stopAccelerometer();
onUnload() {
this.show = false;
uni.stopAccelerometer();
}
}
</script>
<style>
.root{
height: 100%;
display: flex;
flex-direction: column;
background-position: center center;
background-repeat:no-repeat;
}
.shake-up,.shake-down{
height: 50%;
overflow: hidden;
transition:all .5s ease-in-out;
background: #333;
}
.up{
transform: translateY(-50%);
}
.down{
transform: translateY(50%);
}
image{
height: 100%;
width: 100%;
}
.root {
height: 100%;
display: flex;
flex-direction: column;
background-position: center center;
background-repeat: no-repeat;
}
.shake-up,
.shake-down {
height: 50%;
overflow: hidden;
transition: all .5s ease-in-out;
background: #333;
}
.up {
transform: translateY(-50%);
}
.down {
transform: translateY(50%);
}
image {
height: 100%;
width: 100%;
}
</style>
......@@ -14,12 +14,11 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -33,9 +32,9 @@
that.direction = parseInt(res.direction)
})
},
onUnload(){
uni.startCompass();
this.direction = 0;
onUnload() {
uni.startCompass();
this.direction = 0;
},
components: {
pageHead
......
......@@ -44,12 +44,11 @@
</form>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -71,7 +70,7 @@
},
components: {
pageHead
}
}
</script>
......@@ -96,11 +95,13 @@
.page-body-text-location text {
margin: 10rpx;
}
.uni-list-cell-left{
.uni-list-cell-left {
padding: 0 30rpx;
}
button{
background-color:#007aff;
color: #ffffff;
button {
background-color: #007aff;
color: #ffffff;
}
</style>
......@@ -11,12 +11,11 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -42,7 +41,7 @@
},
components: {
pageHead
}
}
</script>
......
......@@ -11,7 +11,6 @@
</view>
</view>
</view>
</view>
</template>
<script>
......@@ -52,12 +51,12 @@
});
},
methods: {
async requestPayment(e,index) {
async requestPayment(e, index) {
this.providerList[index].loading = true;
let orderInfo = await this.getOrderInfo(e.id);
console.log("得到订单信息",orderInfo);
if(orderInfo.statusCode !== 200){
console.log("获得订单信息失败",orderInfo);
console.log("得到订单信息", orderInfo);
if (orderInfo.statusCode !== 200) {
console.log("获得订单信息失败", orderInfo);
return;
}
uni.requestPayment({
......@@ -66,20 +65,20 @@
success: (e) => {
console.log("success", e);
uni.showToast({
title:"感谢您的赞助!"
title: "感谢您的赞助!"
})
},
fail: (e) => {
console.log("fail", e)
},
complete:() => {
complete: () => {
this.providerList[index].loading = false;
}
})
},
getOrderInfo(e){
getOrderInfo(e) {
let appid = uni.os.plus ? plus.runtime.appid : "";
let url = 'http://demo.dcloud.net.cn/payment/?payid=' + e + '&appid=' + appid + '&total=0.01';
return new Promise((res) => {
uni.request({
......@@ -101,7 +100,6 @@
</script>
<style>
.page-section {
width: auto;
margin: 30rpx;
......
......@@ -11,12 +11,11 @@
<button @tap="makeRequest" :loading="loading">request</button>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
const requestUrl = "https://service.dcloud.net.cn/ajax/echo/text?name=uni-app"
const duration = 2000
export default {
......@@ -57,14 +56,14 @@
},
components: {
pageHead
}
}
</script>
<style>
button{
background-color:#007aff;
color: #ffffff;
button {
background-color: #007aff;
color: #ffffff;
}
</style>
......@@ -12,12 +12,11 @@
<button @tap="scanCode">扫一扫</button>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -38,20 +37,21 @@
},
components: {
pageHead
}
}
</script>
<style>
@import "../../../common/uni.css";
.uni-input {
padding: 0 30rpx;
word-break: break-all;
}
button{
background-color:#007aff;
color: #ffffff;
button {
background-color: #007aff;
color: #ffffff;
}
</style>
......@@ -16,12 +16,11 @@
<button formType="submit">设置</button>
</view>
</form>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -46,16 +45,16 @@
},
components: {
pageHead
}
}
</script>
<style>
@import "../../../common/uni.css";
button{
background-color:#007aff;
color: #ffffff;
button {
background-color: #007aff;
color: #ffffff;
}
</style>
......@@ -23,11 +23,11 @@
data() {
return {
title: 'speech',
value:''
value: ''
}
},
methods: {
startRecognize: function() {
startRecognize: function () {
var options = {};
var that = this;
options.engine = 'iFly';
......@@ -39,7 +39,7 @@
console.log("语音识别失败:" + e.message);
});
},
startRecognizeEnglish: function() {
startRecognizeEnglish: function () {
var options = {};
var that = this;
options.engine = 'iFly';
......@@ -64,8 +64,9 @@
background-color: #007aff;
color: #ffffff;
}
textarea{
textarea {
border: 2rpx solid #7A7E83;
height:76rpx;
height: 76rpx;
}
</style>
......@@ -28,12 +28,11 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -112,15 +111,15 @@
},
components: {
pageHead
}
}
</script>
<style>
@import "../../../common/uni.css";
.btn-setstorage{
background-color:#007aff;
.btn-setstorage {
background-color: #007aff;
color: #ffffff;
}
</style>
......@@ -17,12 +17,11 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -54,8 +53,7 @@
},
components: {
pageHead
}
}
</script>
......@@ -20,21 +20,20 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
title: 'uploadFile',
imageSrc:''
imageSrc: ''
}
},
onUnload(){
this.imageSrc = '';
onUnload() {
this.imageSrc = '';
},
methods: {
chooseImage: function () {
......@@ -82,7 +81,7 @@
},
components: {
pageHead
}
}
</script>
......
......@@ -35,7 +35,6 @@
</view>
</view>
</view>
<view class="page-body-info">
<block v-if="src === ''">
<view class="image-plus image-plus-nb" @tap="chooseVideo">
......@@ -54,7 +53,7 @@
</template>
<script>
import pageHead from '../../../components/page-head.vue'
var sourceType = [
['camera'],
['album'],
......@@ -109,7 +108,7 @@
},
components: {
pageHead
}
}
</script>
......
......@@ -15,7 +15,6 @@
<view class="page-body-button"></view>
</view>
</block>
<block v-if="recording === true">
<view class="page-body-time">
<text class="time-big">{{formatedRecordTime}}</text>
......@@ -28,7 +27,6 @@
<view class="page-body-button"></view>
</view>
</block>
<block v-if="hasRecord === true && playing === false">
<view class="page-body-time">
<text class="time-big">{{formatedPlayTime}}</text>
......@@ -44,7 +42,6 @@
</view>
</view>
</block>
<block v-if="hasRecord === true && playing === true">
<view class="page-body-time">
<text class="time-big">{{formatedPlayTime}}</text>
......@@ -61,12 +58,11 @@
</block>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
var util = require('../../../common/util.js')
var playTimeInterval = null;
var recordTimeInterval = null;
......@@ -76,56 +72,56 @@
data() {
return {
title: 'start/stopRecord、play/stopVoice',
recording: false,//录音中
playing: false,//播放中
hasRecord: false,//是否有了一个
tempFilePath:'',
recording: false, //录音中
playing: false, //播放中
hasRecord: false, //是否有了一个
tempFilePath: '',
recordTime: 0,
playTime: 0,
formatedRecordTime: '00:00:00',//录音的总时间
formatedPlayTime: '00:00:00'//播放录音的当前时间
formatedRecordTime: '00:00:00', //录音的总时间
formatedPlayTime: '00:00:00' //播放录音的当前时间
}
},
onUnload: function () {
this.end();
this.end();
},
onLoad:function(){
onLoad: function () {
music = uni.createInnerAudioContext();
music.onEnded(() => {
console.log('结束');
clearInterval(playTimeInterval)
var playTime = 0
console.log('play voice finished')
this.playing = false;
this.formatedPlayTime = util.formatTime(playTime);
this.playTime = playTime;
console.log('结束');
clearInterval(playTimeInterval)
var playTime = 0
console.log('play voice finished')
this.playing = false;
this.formatedPlayTime = util.formatTime(playTime);
this.playTime = playTime;
});
recorderManager = uni.getRecorderManager();
recorderManager.onStart(() => {
console.log('recorder start');
console.log('recorder start');
});
recorderManager.onStop((res) => {
console.log('停止录音 stop', res);
music.src = res.tempFilePath;
this.hasRecord = true;
this.recording = false;
console.log('停止录音 stop', res);
music.src = res.tempFilePath;
this.hasRecord = true;
this.recording = false;
});
},
methods: {
startRecord () {//开始录音
startRecord() { //开始录音
this.recording = true;
recordTimeInterval = setInterval(() => {
this.recordTime += 1;
this.formatedRecordTime = util.formatTime(this.recordTime);
}, 1000)
recorderManager.start();
recorderManager.start();
},
stopRecord() {//停止录音
recorderManager.stop();
stopRecord() { //停止录音
recorderManager.stop();
clearInterval(recordTimeInterval);
},
playVoice() {
......@@ -143,22 +139,22 @@
this.playTime = 0;
music.stop();
},
end(){
music.stop();
recorderManager.stop();
clearInterval(recordTimeInterval)
clearInterval(playTimeInterval);
this.recording = false,this.playing=false,this.hasRecord = false;
this.playTime = 0,this.recordTime = 0;
this.formatedRecordTime = "00:00:00",this.formatedRecordTime = "00:00:00";
end() {
music.stop();
recorderManager.stop();
clearInterval(recordTimeInterval)
clearInterval(playTimeInterval);
this.recording = false, this.playing = false, this.hasRecord = false;
this.playTime = 0, this.recordTime = 0;
this.formatedRecordTime = "00:00:00", this.formatedRecordTime = "00:00:00";
},
clear() {
this.end();
this.end();
}
},
components: {
pageHead
}
}
</script>
......
......@@ -7,12 +7,11 @@
:action="audioAction" controls></audio>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -27,13 +26,9 @@
method: 'pause'
}
}
},
methods: {
},
components: {
pageHead
}
}
</script>
......@@ -26,12 +26,11 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......
......@@ -6,12 +6,11 @@
<canvas canvas-id="canvas" class="canvas"></canvas>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -76,7 +75,7 @@
},
components: {
pageHead
}
}
</script>
......
......@@ -26,18 +26,16 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
title: 'checkbox',
items: [
{
items: [{
value: 'USA',
name: '美国'
},
......@@ -82,15 +80,15 @@
},
components: {
pageHead
}
}
</script>
<style>
@import "../../../common/uni.css";
.uni-list-cell{
justify-content:flex-start
.uni-list-cell {
justify-content: flex-start
}
</style>
......@@ -48,12 +48,11 @@
</view>
</form>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -83,7 +82,7 @@
},
components: {
pageHead
}
}
</script>
......@@ -96,8 +95,9 @@
min-width: 270rpx;
margin-right: 20rpx;
}
.btn-submit{
background-color:#007aff;
color: #ffffff;
.btn-submit {
background-color: #007aff;
color: #ffffff;
}
</style>
<template>
<view class="index">
<page-head :title="title"></page-head>
<view class="icon-box">
<icon class="icon-box-img" type="success" size="93"></icon>
<view class="icon-box-ctn">
<view class="icon-box-title">成功</view>
<view class="icon-box-desc">用于表示操作顺利完成</view>
</view>
</view>
<view class="icon-box">
<icon class="icon-box-img" type="info" size="93"></icon>
<view class="icon-box-ctn">
<view class="icon-box-title">提示</view>
<view class="icon-box-desc">用于表示信息提示;也常用于缺乏条件的操作拦截,提示用户所需信息</view>
</view>
</view>
<view class="icon-box">
<icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon>
<view class="icon-box-ctn">
<view class="icon-box-title">普通警告</view>
<view class="icon-box-desc">用于表示操作后将引起一定后果的情况;也用于表示由于系统原因而造成的负向结果</view>
</view>
</view>
<view class="icon-box">
<icon class="icon-box-img" type="warn" size="93"></icon>
<view class="icon-box-ctn">
<view class="icon-box-title">强烈警告</view>
<view class="icon-box-desc">用于表示由于用户原因造成的负向结果;也用于表示操作后将引起不可严重的挽回的后果的情况</view>
</view>
</view>
<view class="icon-box">
<icon class="icon-box-img" type="waiting" size="93"></icon>
<view class="icon-box-ctn">
<view class="icon-box-title">等待</view>
<view class="icon-box-desc">用于表示等待,告知用户结果需等待</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="success" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">多选控件图标_已选择</view>
<view class="icon-box-desc">用于多选控件中,表示已选择该项目</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="circle" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">多选控件图标_未选择</view>
<view class="icon-box-desc">用于多选控件中,表示该项目可被选择,但还未选择</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="warn" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">错误提示</view>
<view class="icon-box-desc">用于在表单中表示出现错误</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="success_no_circle" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">单选控件图标_已选择</view>
<view class="icon-box-desc">用于单选控件中,表示已选择该项目</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="download" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">下载</view>
<view class="icon-box-desc">用于表示可下载</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="info_circle" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">提示</view>
<view class="icon-box-desc">用于在表单中表示有信息提示</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="cancel" size="23"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">停止或关闭</view>
<view class="icon-box-desc">用于在表单中,表示关闭或停止</view>
</view>
</view>
<view class="icon-box">
<view class="icon-small-wrp">
<icon class="icon-small" type="search" size="14"></icon>
</view>
<view class="icon-box-ctn">
<view class="icon-box-title">搜索</view>
<view class="icon-box-desc">用于搜索控件中,表示可搜索</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
title: 'icon'
}
},
methods: {},
components: {
pageHead
}
}
</script>
<style>
.icon-box {
margin-bottom: 40rpx;
padding: 0 75rpx;
display: flex;
align-items: center;
}
.icon-box-img {
margin-right: 46rpx;
}
.icon-box-ctn {
flex-shrink: 100;
}
.icon-box-title {
font-size: 34rpx;
}
.icon-box-desc {
margin-top: 12rpx;
font-size: 26rpx;
color: #888;
}
.icon-small-wrp {
margin-right: 46rpx;
width: 93px;
height: 93px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
......@@ -130,7 +130,7 @@
justify-content: space-between;
text-align: center;
}
.flex-container .icon-item {
display: inline-block;
width: 100rpx;
......@@ -140,9 +140,9 @@
border-radius: 50rpx;
margin: 6rpx;
}
.uni-icon {
margin-top: 24rpx;
color: #8f8f94;
}
</style>
\ No newline at end of file
</style>
......@@ -15,12 +15,11 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -30,7 +29,7 @@
methods: {},
components: {
pageHead
}
}
</script>
......
......@@ -5,17 +5,19 @@
<view class="page-section-title" style="text-align: left;">以下将展示uni-app官方组件能力,组件样式仅供参考,开发者可根据自身需求自定义组件样式,具体属性参数详见uni-app开发文档。</view>
</view>
<view class="uni-card" v-for="(list,index) in lists" :key="index">
<view class="uni-list" >
<view class="uni-list-cell uni-collapse">
<view class="uni-list-cell-navigate uni-navigate-bottom" hover-class="uni-list-cell-hover" :class="list.open ? 'uni-active' : ''" @click="trigerCollapse(index)">
{{list.name}}
</view>
<view class="uni-list uni-collapse" :class="list.open ? 'uni-active' : ''">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key) in list.pages" :key="key" :url="item + '/index'" @click="goDetailPage(item)">
<view class="uni-list-cell-navigate uni-navigate-right"> {{item}} </view>
</view>
</view>
</view>
<view class="uni-list">
<view class="uni-list-cell uni-collapse">
<view class="uni-list-cell-navigate uni-navigate-bottom" hover-class="uni-list-cell-hover" :class="list.open ? 'uni-active' : ''"
@click="trigerCollapse(index)">
{{list.name}}
</view>
<view class="uni-list uni-collapse" :class="list.open ? 'uni-active' : ''">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key) in list.pages" :key="key" :url="item + '/index'"
@click="goDetailPage(item)">
<view class="uni-list-cell-navigate uni-navigate-right"> {{item}} </view>
</view>
</view>
</view>
</view>
</view>
</view>
......@@ -65,19 +67,19 @@
}
},
methods: {
trigerCollapse(e){
trigerCollapse(e) {
for (let i = 0, len = this.lists.length; i < len; ++i) {
if (e === i) {
this.lists[i].open = !this.lists[i].open;
} else {
this.lists[i].open = false;
}
if (e === i) {
this.lists[i].open = !this.lists[i].open;
} else {
this.lists[i].open = false;
}
}
},
goDetailPage(e){
uni.navigateTo({
url: '/pages/component/' + e + '/index'
})
goDetailPage(e) {
uni.navigateTo({
url: '/pages/component/' + e + '/index'
})
}
}
}
......@@ -85,14 +87,16 @@
<style>
@import "../../common/uni.css";
.uni-card{
box-shadow: none;
}
.uni-list:after{
height: 0;
}
.uni-list:before{
height: 0;
}
.uni-card {
box-shadow: none;
}
.uni-list:after {
height: 0;
}
.uni-list:before {
height: 0;
}
</style>
......@@ -86,7 +86,7 @@
<view class="page-section-title">带清除按钮的输入框</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="bindClearInput"/>
<input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="bindClearInput" />
<view class="uni-icon uni-icon-clear" v-if="showClearIcon" @click="clearIcon"></view>
</view>
</view>
......@@ -95,28 +95,27 @@
<view class="page-section-title">可查看密码的输入框</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" placeholder="请输入密码" :password="showPassword"/>
<input class="uni-input" placeholder="请输入密码" :password="showPassword" />
<view class="uni-icon uni-icon-eye" :class="[!showPassword ? 'uni-active' : '']" @click="changePassword"></view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
title: 'input',
focus: false,
inputValue: '',
showClearIcon:false,
inputClearValue:"",
showPassword:true,
src:"../../../static/eye-1.png"
showClearIcon: false,
inputClearValue: "",
showPassword: true,
src: "../../../static/eye-1.png"
}
},
methods: {
......@@ -150,25 +149,25 @@
uni.hideKeyboard();
}
},
bindClearInput:function (e) {
bindClearInput: function (e) {
this.inputClearValue = e.target.value;
if(e.target.value.length > 0){
if (e.target.value.length > 0) {
this.showClearIcon = true;
}else{
} else {
this.showClearIcon = false;
}
},
clearIcon:function(){
clearIcon: function () {
this.inputClearValue = "";
this.showClearIcon = false;
},
changePassword:function(){
changePassword: function () {
this.showPassword = !this.showPassword;
}
},
components: {
pageHead
}
}
</script>
......@@ -179,13 +178,16 @@
.page-section {
margin-bottom: 20rpx;
}
.uni-list-cell{
.uni-list-cell {
padding: 0 30rpx;
}
.uni-input{
.uni-input {
flex: 1;
}
.uni-icon{
.uni-icon {
color: #999;
}
</style>
......@@ -35,18 +35,16 @@
</label>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
title: 'label',
checkboxItems:
[{
checkboxItems: [{
name: 'USA',
value: '美国'
},
......@@ -56,8 +54,7 @@
checked: 'true'
}
],
radioItems: [
{
radioItems: [{
name: 'USA',
value: '美国'
},
......@@ -81,7 +78,6 @@
changed['checkboxItems[' + i + '].checked'] = false
}
}
// this.setData(changed)
},
radioChange: function (e) {
var checked = e.target.value
......@@ -93,7 +89,6 @@
changed['radioItems[' + i + '].checked'] = false
}
}
// this.setData(changed)
},
tapEvent: function (e) {
console.log('按钮被点击')
......@@ -101,7 +96,6 @@
},
components: {
pageHead
}
}
</script>
......
......@@ -7,12 +7,11 @@
</map>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -35,8 +34,6 @@
},
components: {
pageHead
}
}
</script>
......@@ -11,7 +11,6 @@
</navigator>
</view>
</view>
</view>
</template>
<script>
......@@ -30,4 +29,3 @@
}
}
</script>
......@@ -35,7 +35,7 @@
<view class="uni-list">
<view class="uni-list-cell">
<view class="list-left">
当前选择
当前选择
</view>
<view class="uni-list-cell-db">
<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
......@@ -46,12 +46,12 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -76,17 +76,19 @@
},
components: {
pageHead
}
}
</script>
<style>
@import "../../../common/uni.css";
.uni-list-cell{
.uni-list-cell {
justify-content: flex-start;
}
.uni-list-cell-db,.list-left{
.uni-list-cell-db,
.list-left {
padding: 0 24rpx;
}
</style>
......@@ -18,24 +18,19 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
title: 'progress'
}
},
methods: {
},
components: {
pageHead
}
}
</script>
......
......@@ -11,8 +11,6 @@
<radio value="r2" />未选中
</label>
</view>
<view class="page-section">
<view class="page-section-title">推荐展示样式</view>
<view class="uni-list">
......@@ -27,18 +25,16 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
title: 'radio',
items: [
{
items: [{
value: 'USA',
name: '美国'
},
......@@ -79,15 +75,14 @@
},
components: {
pageHead
}
}
</script>
<style>
@import "../../../common/uni.css";
.uni-list-cell{
justify-content:flex-start
.uni-list-cell {
justify-content: flex-start
}
</style>
......@@ -28,7 +28,6 @@
</view>
</view>
</view>
</view>
</template>
<script>
......@@ -83,5 +82,4 @@
text-align: center;
font-size: 36rpx;
}
</style>
......@@ -23,12 +23,11 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -39,4 +38,4 @@
pageHead
}
}
</script>
\ No newline at end of file
</script>
......@@ -41,8 +41,6 @@
<slider @change="intervalChange" :value="interval" min="2000" max="10000" />
</view>
</view>
</view>
</template>
<script>
......@@ -102,5 +100,4 @@
color: #353535;
font-size: 30rpx;
}
</style>
......@@ -9,7 +9,6 @@
<switch @change="switch2Change" />
</view>
</view>
<view class="page-section">
<view class="page-section-title">推荐展示样式</view>
<view class="uni-list">
......@@ -24,12 +23,11 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......
......@@ -10,12 +10,11 @@
<button :disabled="!canRemove" @tap="remove">remove line</button>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -59,13 +58,11 @@
},
components: {
pageHead
}
}
</script>
<style>
.text-box {
margin-bottom: 70rpx;
padding: 40rpx 0;
......
......@@ -8,7 +8,6 @@
<textarea @blur="bindTextAreaBlur" auto-height />
</view>
</view>
<view class="page-section">
<view class="page-section-title">这是一个可以自动聚焦的textarea</view>
<view class="textarea-wrp">
......@@ -16,12 +15,11 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -36,7 +34,6 @@
},
components: {
pageHead
}
}
</script>
......
......@@ -3,8 +3,8 @@
<page-head :title="title"></page-head>
<view class="page-body">
<view class="page-section">
<video id="myVideo" src="http://img.cdn.qiniu.dcloud.net.cn/wap2appvsnative.mp4"
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
<video id="myVideo" src="http://img.cdn.qiniu.dcloud.net.cn/wap2appvsnative.mp4" @error="videoErrorCallback" :danmu-list="danmuList"
enable-danmu danmu-btn controls></video>
<view class="uni-list">
<view class="uni-list-cell">
......@@ -17,24 +17,22 @@
</view>
</view>
<view class="btn-area">
<button @tap="bindSendDanmu" class="page-body-button" formType="submit">发送弹幕</button>
<button @tap="bindSendDanmu" class="page-body-button" formType="submit">发送弹幕</button>
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
title: 'video',
src: '',
inputValue: '',
danmuList: [
{
danmuList: [{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
......@@ -87,25 +85,28 @@
},
components: {
pageHead
}
}
</script>
<style>
@import "../../../common/uni.css";
button{
background-color:#007aff;
button {
background-color: #007aff;
color: #ffffff;
}
.uni-list{
.uni-list {
margin-top: 40rpx;
}
.uni-input{
.uni-input {
text-align: left;
}
.page-section{
.page-section {
text-align: center;
}
</style>
......@@ -25,12 +25,11 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......@@ -45,7 +44,7 @@
<style>
@import "../../../common/uni.css";
.uni-flex {
margin-top: 60rpx;
}
......
......@@ -2,42 +2,42 @@
<view class="page">
<page-head :title="title"></page-head>
<view class="uni-card">
<view class="uni-list">
<block v-for="(list,index) in lists" :key="index">
<view class="uni-list-cell uni-collapse">
<view class="uni-list-cell-navigate uni-navigate-bottom" :class="list.show ? 'uni-active' : ''" @click="trigerCollapse(index)">
{{list.title}}
</view>
<view class="uni-collapse-content" :class="list.show ? 'uni-active' : ''">
<swiper v-if="list.type === 'swiper'" autoplay="true" indicator-dots="true" circular="true">
<swiper-item v-for="(img,key) in imgUrls" :key="key">
<image :src="img" style="width: 100%;"/>
</swiper-item>
</swiper>
<view v-if="list.type === 'font'" style="padding: 18px;">
<view style="font-size: 50rpx;">hello uni-app</view>
<view style="font-size: 40rpx;">hello uni-app</view>
<view style="font-size: 30rpx;">hello uni-app</view>
<view style="font-size: 20rpx;">hello uni-app</view>
<view style="font-size: 10rpx;">hello uni-app</view>
</view>
<view v-if="list.type === 'list'">
<view class="uni-list">
<view class="uni-list-cell" hover-class="uni-list-cell-hover">
<view class="uni-list-cell-navigate uni-navigate-right">hello uni-app</view>
</view>
<view class="uni-list-cell" hover-class="uni-list-cell-hover">
<view class="uni-list-cell-navigate uni-navigate-right">hello uni-app</view>
</view>
<view class="uni-list-cell" hover-class="uni-list-cell-hover">
<view class="uni-list-cell-navigate uni-navigate-right">hello uni-app</view>
</view>
</view>
</view>
</view>
</view>
</block>
</view>
<view class="uni-list">
<block v-for="(list,index) in lists" :key="index">
<view class="uni-list-cell uni-collapse">
<view class="uni-list-cell-navigate uni-navigate-bottom" :class="list.show ? 'uni-active' : ''" @click="trigerCollapse(index)">
{{list.title}}
</view>
<view class="uni-collapse-content" :class="list.show ? 'uni-active' : ''">
<swiper v-if="list.type === 'swiper'" autoplay="true" indicator-dots="true" circular="true">
<swiper-item v-for="(img,key) in imgUrls" :key="key">
<image :src="img" style="width: 100%;" />
</swiper-item>
</swiper>
<view v-if="list.type === 'font'" style="padding: 18px;">
<view style="font-size: 50rpx;">hello uni-app</view>
<view style="font-size: 40rpx;">hello uni-app</view>
<view style="font-size: 30rpx;">hello uni-app</view>
<view style="font-size: 20rpx;">hello uni-app</view>
<view style="font-size: 10rpx;">hello uni-app</view>
</view>
<view v-if="list.type === 'list'">
<view class="uni-list">
<view class="uni-list-cell" hover-class="uni-list-cell-hover">
<view class="uni-list-cell-navigate uni-navigate-right">hello uni-app</view>
</view>
<view class="uni-list-cell" hover-class="uni-list-cell-hover">
<view class="uni-list-cell-navigate uni-navigate-right">hello uni-app</view>
</view>
<view class="uni-list-cell" hover-class="uni-list-cell-hover">
<view class="uni-list-cell-navigate uni-navigate-right">hello uni-app</view>
</view>
</view>
</view>
</view>
</view>
</block>
</view>
</view>
</view>
</template>
......@@ -48,39 +48,38 @@
export default {
data: {
title: 'accordion',
lists:[
{
title:"图片轮播",
type:'swiper',
show:false
},
{
title:"列表",
type:'list',
show:false
},
{
title:"文字排版",
type:'font',
show:false
}
lists: [{
title: "图片轮播",
type: 'swiper',
show: false
},
{
title: "列表",
type: 'list',
show: false
},
{
title: "文字排版",
type: 'font',
show: false
}
],
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
]
},
methods: {
trigerCollapse(e) {
for (let i = 0, len = this.lists.length; i < len; ++i) {
if (e === i) {
this.lists[i].show = !this.lists[i].show;
} else {
this.lists[i].show = false;
}
trigerCollapse(e) {
for (let i = 0, len = this.lists.length; i < len; ++i) {
if (e === i) {
this.lists[i].show = !this.lists[i].show;
} else {
this.lists[i].show = false;
}
}
}
}
},
components: {
pageHead
......@@ -90,7 +89,7 @@
<style>
@import "../../../common/uni.css";
.page {
padding-top: 60rpx;
}
......@@ -98,10 +97,9 @@
page {
background: #efeff4;
}
.list-collapse{
padding-left: 18px;
box-sizing: border-box;
.list-collapse {
padding-left: 18px;
box-sizing: border-box;
}
</style>
......@@ -41,7 +41,7 @@
<style>
@import "../../../common/uni.css";
.page {
padding-top: 60rpx;
}
......@@ -49,9 +49,9 @@
page {
background: #efeff4;
}
.uni-badge,.title{
.uni-badge,
.title {
margin: 20rpx;
}
</style>
......@@ -75,5 +75,4 @@
page {
background: #efeff4;
}
</style>
......@@ -26,26 +26,26 @@
data() {
return {
openDrag: false,
openClick:false,
openClick: false,
markX: 0,
newmarkX: 0,
markY:0,
newmarkY:0,
markY: 0,
newmarkY: 0,
istoright: true
}
},
onReady:function(){
//如果返回时侧滑仍是打开状态,则再次打开页面,侧滑依然显示。如果不想看到,可以进来的时候重置下状态
this.openDrag = false;
this.openClick = false;
onReady: function () {
//如果返回时侧滑仍是打开状态,则再次打开页面,侧滑依然显示。如果不想看到,可以进来的时候重置下状态
this.openDrag = false;
this.openClick = false;
},
methods: {
tap_ch: function (e) {
if (this.openClick || this.openDrag) {
this.openClick = false
this.openDrag = false
this.openClick = false
this.openDrag = false
} else {
this.openClick = true
this.openClick = true
}
},
tap_start: function (e) {
......@@ -59,14 +59,14 @@
console.log('this.newmarkX:' + e.touches[0].pageX);
if (this.markX > this.newmarkX) {
this.istoright = false;
}else{
} else {
this.istoright = true;
}
this.markX = this.newmarkX;
},
tap_end: function () {
if(this.newmarkY - this.markY > 25 || this.markY - this.newmarkY > 25){//防止上下拖动时触发侧滑
return false;
if (this.newmarkY - this.markY > 25 || this.markY - this.newmarkY > 25) { //防止上下拖动时触发侧滑
return false;
}
this.markX = 0;
this.newmarkX = 0;
......@@ -74,7 +74,7 @@
this.newmarkY = 0;
if (!this.istoright) {
this.openDrag = true
}else{
} else {
this.openDrag = false
}
}
......
......@@ -27,26 +27,26 @@
data() {
return {
openDrag: false,
openClick:false,
openClick: false,
markX: 0,
newmarkX: 0,
markY:0,
newmarkY:0,
markY: 0,
newmarkY: 0,
istoright: true
}
},
onReady:function(){
//如果返回时侧滑仍是打开状态,则再次打开页面,侧滑依然显示。如果不想看到,可以进来的时候重置下状态
this.openDrag = false;
this.openClick = false;
onReady: function () {
//如果返回时侧滑仍是打开状态,则再次打开页面,侧滑依然显示。如果不想看到,可以进来的时候重置下状态
this.openDrag = false;
this.openClick = false;
},
methods: {
tap_ch: function (e) {
if (this.openClick || this.openDrag) {
this.openClick = false
this.openDrag = false
this.openClick = false
this.openDrag = false
} else {
this.openClick = true
this.openClick = true
}
},
tap_start: function (e) {
......@@ -60,14 +60,14 @@
console.log('this.newmarkX:' + e.touches[0].pageX);
if (this.markX > this.newmarkX) {
this.istoright = false;
}else{
} else {
this.istoright = true;
}
this.markX = this.newmarkX;
},
tap_end: function () {
if(this.newmarkY - this.markY > 25 || this.markY - this.newmarkY > 25){//防止上下拖动时触发侧滑
return false;
if (this.newmarkY - this.markY > 25 || this.markY - this.newmarkY > 25) { //防止上下拖动时触发侧滑
return false;
}
this.markX = 0;
this.newmarkX = 0;
......@@ -75,7 +75,7 @@
this.newmarkY = 0;
if (!this.istoright) {
this.openDrag = true
}else{
} else {
this.openDrag = false
}
}
......
......@@ -16,7 +16,7 @@
</view>
</view>
</view>
<view @touchmove="tap_drag" @touchend="tap_end" @touchstart="tap_start" :class="['page-top',openDrag ? 'c-state2' : '',openClick ? 'c-state2' : '']">
<view @touchmove="tap_drag" @touchend="tap_end" @touchstart="tap_start" :class="['page-top',openDrag ? 'c-state2' : '',openClick ? 'c-state2' : '']">
<image src="../../../static/menu.png" @tap="tap_ch"></image>
</view>
</view>
......@@ -26,26 +26,26 @@
data() {
return {
openDrag: false,
openClick:false,
openClick: false,
markX: 0,
newmarkX: 0,
markY:0,
newmarkY:0,
markY: 0,
newmarkY: 0,
istoright: false
}
},
onReady:function(){
//如果返回时侧滑仍是打开状态,则再次打开页面,侧滑依然显示。如果不想看到,可以进来的时候重置下状态
this.openDrag = false;
this.openClick = false;
onReady: function () {
//如果返回时侧滑仍是打开状态,则再次打开页面,侧滑依然显示。如果不想看到,可以进来的时候重置下状态
this.openDrag = false;
this.openClick = false;
},
methods: {
tap_ch: function (e) {
if (this.openClick || this.openDrag) {
this.openClick = false
this.openDrag = false
this.openClick = false
this.openDrag = false
} else {
this.openClick = true
this.openClick = true
}
},
tap_start: function (e) {
......@@ -59,14 +59,14 @@
console.log('this.newmarkX:' + e.touches[0].pageX);
if (this.markX > this.newmarkX) {
this.istoright = false;
}else{
} else {
this.istoright = true;
}
this.markX = this.newmarkX;
},
tap_end: function () {
if(this.newmarkY - this.markY > 25 || this.markY - this.newmarkY > 25){//防止上下拖动时触发侧滑
return false;
if (this.newmarkY - this.markY > 25 || this.markY - this.newmarkY > 25) { //防止上下拖动时触发侧滑
return false;
}
this.markX = 0;
this.newmarkX = 0;
......@@ -74,7 +74,7 @@
this.newmarkY = 0;
if (this.istoright) {
this.openDrag = true
}else{
} else {
this.openDrag = false
}
}
......
......@@ -16,7 +16,7 @@
</view>
</view>
</view>
<view @touchmove="tap_drag" @touchend="tap_end" @touchstart="tap_start" :class="['page-top',openDrag ? 'c-state1' : '',openClick ? 'c-state1' : '']">
<view @touchmove="tap_drag" @touchend="tap_end" @touchstart="tap_start" :class="['page-top',openDrag ? 'c-state1' : '',openClick ? 'c-state1' : '']">
<image src="../../../static/menu.png" @tap="tap_ch"></image>
</view>
</view>
......@@ -26,26 +26,26 @@
data() {
return {
openDrag: false,
openClick:false,
openClick: false,
markX: 0,
newmarkX: 0,
markY:0,
newmarkY:0,
markY: 0,
newmarkY: 0,
istoright: false
}
},
onReady:function(){
//如果返回时侧滑仍是打开状态,则再次打开页面,侧滑依然显示。如果不想看到,可以进来的时候重置下状态
this.openDrag = false;
this.openClick = false;
onReady: function () {
//如果返回时侧滑仍是打开状态,则再次打开页面,侧滑依然显示。如果不想看到,可以进来的时候重置下状态
this.openDrag = false;
this.openClick = false;
},
methods: {
tap_ch: function (e) {
if (this.openClick || this.openDrag) {
this.openClick = false
this.openDrag = false
this.openClick = false
this.openDrag = false
} else {
this.openClick = true
this.openClick = true
}
},
tap_start: function (e) {
......@@ -57,13 +57,13 @@
this.newmarkY = e.touches[0].pageY;
if (this.markX > this.newmarkX) {
this.istoright = false;
}else{
} else {
this.istoright = true;
}
this.markX = this.newmarkX;
},
tap_end: function () {
if(this.newmarkY - this.markY > 25 || this.markY - this.newmarkY > 25){//防止上下拖动时触发侧滑
if (this.newmarkY - this.markY > 25 || this.markY - this.newmarkY > 25) { //防止上下拖动时触发侧滑
return false;
}
this.markX = 0;
......@@ -72,7 +72,7 @@
this.newmarkY = 0;
if (this.istoright) {
this.openDrag = true
}else{
} else {
this.openDrag = false
}
}
......
<template>
<view class="page">
<page-head :title="title"></page-head>
<view class="uni-grid-9">
<view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover" v-for="(item,index) in date" :key="index" :class="index % 3 === 2 ? 'no-border-right' : ''">
<image class="uni-grid-9-image" :src="item"></image>
<text class="uni-grid-9-text">grid</text>
</view>
<view class="page">
<page-head :title="title"></page-head>
<view class="uni-grid-9">
<view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover" v-for="(item,index) in date" :key="index" :class="index % 3 === 2 ? 'no-border-right' : ''">
<image class="uni-grid-9-image" :src="item"></image>
<text class="uni-grid-9-text">grid</text>
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data:{
title: 'grid',
date:["../../../static/c1.png","../../../static/c2.png","../../../static/c3.png","../../../static/c4.png","../../../static/c5.png","../../../static/c6.png","../../../static/c7.png","../../../static/c8.png","../../../static/c9.png"]
},
import pageHead from '../../../components/page-head.vue'
created () {
},
components: {
pageHead
export default {
data: {
title: 'grid',
date: ["../../../static/c1.png", "../../../static/c2.png", "../../../static/c3.png",
"../../../static/c4.png", "../../../static/c5.png", "../../../static/c6.png",
"../../../static/c7.png", "../../../static/c8.png", "../../../static/c9.png"
]
},
created() {
},
components: {
pageHead
}
}
}
</script>
<style>
@import "../../../common/uni.css";
.page{
padding-top: 60rpx;
}
page{
background: #efeff4;
}
@import "../../../common/uni.css";
.page {
padding-top: 60rpx;
}
page {
background: #efeff4;
}
</style>
......@@ -63,12 +63,12 @@
name: '选项卡',
url: 'tabbar'
},
// {
// id: 'drags',
// name: '侧滑导航',
// open: false,
// pages: ['drag-right', 'drag-right-zoom', 'drag-left', 'drag-left-zoom']
// },
//#ifdef APP-PLUS
{
name: '问题反馈',
url: '/platforms/app-plus/feedback/index'
},
//#endif
{
name: '数字选择框',
url: 'number-box'
......@@ -92,8 +92,9 @@
},
goDetailPage(e) {
let path = e.url ? e.url : e;
let url = ~path.indexOf('platform') ? e : '/pages/template/' + path + '/index';
uni.navigateTo({
url: '/pages/template/' + path + '/index'
url: url
})
}
}
......
<template>
<view class="page">
<view class="banner" @click="goDetail(banner)">
<image class="banner-img" :src="banner.cover"></image>
<view class="banner-title">{{banner.title}}</view>
<image class="banner-img" :src="banner.cover"></image>
<view class="banner-title">{{banner.title}}</view>
</view>
<view class="article-meta">
<text class="article-author">{{banner.author_name}}</text>
......@@ -21,27 +21,27 @@
export default {
data: {
title: 'list-triplex-row',
banner:{},
htmlString:""
banner: {},
htmlString: ""
},
onLoad(e){
onLoad(e) {
this.banner = JSON.parse(e.detailDate);
this.getDetail();
uni.setNavigationBarTitle({
title:this.banner.title
title: this.banner.title
})
},
onUnload(){
this.htmlString = "";
this.banner = {}
onUnload() {
this.htmlString = "";
this.banner = {}
},
methods:{
getDetail(){
methods: {
getDetail() {
uni.request({
url: 'http://spider.dcloud.net.cn/api/news/36kr/' + this.banner.post_id,
success: (data) => {
if (data.statusCode == 200) {
this.htmlString = data.data.content.replace(/\\/g,"");
this.htmlString = data.data.content.replace(/\\/g, "");
}
},
fail: () => {
......@@ -58,47 +58,54 @@
page {
background: #efeff4;
}
.banner {
height: 180px;
overflow: hidden;
position: relative;
background-color: #ccc;
height: 180px;
overflow: hidden;
position: relative;
background-color: #ccc;
}
.banner-img{
width: 100%;
.banner-img {
width: 100%;
}
.banner-title{
max-height: 84rpx;
overflow: hidden;
position: absolute;
left: 30rpx;
bottom: 30rpx;
width: 90%;
font-size: 32rpx;
font-weight: 400;
line-height: 42rpx;
color: white;
z-index: 11;
.banner-title {
max-height: 84rpx;
overflow: hidden;
position: absolute;
left: 30rpx;
bottom: 30rpx;
width: 90%;
font-size: 32rpx;
font-weight: 400;
line-height: 42rpx;
color: white;
z-index: 11;
}
.article-meta{
.article-meta {
padding: 20rpx 40rpx;
display: flex;
flex-direction: row;
justify-content: flex-start;
color: gray;
}
.article-text{
.article-text {
font-size: 26rpx;
line-height: 50rpx;
margin: 0 20rpx;
}
.article-author,.article-time{
.article-author,
.article-time {
font-size: 30rpx;
}
.article-content{
.article-content {
padding: 0 30rpx;
overflow: hidden;
font-size: 30rpx;
}
</style>
......@@ -29,7 +29,7 @@
banner: {},
listData: [],
last_id: "",
reload:false
reload: false
},
onLoad() {
this.getBanner();
......
......@@ -4,16 +4,16 @@
<view class="uni-list">
<block v-for="(item,index) in lists" :key="index">
<view class="uni-list-cell" hover-class="uni-list-cell-hover">
<view class="uni-triplex-row">
<view class="uni-triplex-left">
<text class="uni-h4 uni-ellipsis">列表主标题</text>
<text class="uni-h5">列表副标题</text>
<text class="uni-h6 uni-ellipsis">列表内容文字,列表内容文字,列表内容文字,列表内容文字,列表内容文字,列表内容文字</text>
</view>
<view class="uni-triplex-right">
<text class="uni-h5">12:15</text>
</view>
</view>
<view class="uni-triplex-row">
<view class="uni-triplex-left">
<text class="uni-h4 uni-ellipsis">列表主标题</text>
<text class="uni-h5">列表副标题</text>
<text class="uni-h6 uni-ellipsis">列表内容文字,列表内容文字,列表内容文字,列表内容文字,列表内容文字,列表内容文字</text>
</view>
<view class="uni-triplex-right">
<text class="uni-h5">12:15</text>
</view>
</view>
</view>
</block>
</view>
......@@ -26,12 +26,12 @@
export default {
data: {
title: 'list-triplex-row',
lists:[]
lists: []
},
onLoad(){
onLoad() {
let list = [];
for (let i = 0; i < 5; i++) {
list.push(i)
list.push(i)
}
this.lists = list;
},
......@@ -43,7 +43,7 @@
<style>
@import "../../../common/uni.css";
.page {
padding-top: 60rpx;
}
......@@ -51,7 +51,4 @@
page {
background: #efeff4;
}
</style>
......@@ -4,35 +4,35 @@
<view class="uni-card">
<view class="uni-list">
<view class="uni-list-cell-divider">
右侧带箭头
右侧带箭头
</view>
<view class="uni-list-cell" hover-class="uni-list-cell-hover">
<view class="uni-list-cell-navigate uni-navigate-right">
Item1
</view>
<view class="uni-list-cell-navigate uni-navigate-right">
Item1
</view>
</view>
<view class="uni-list-cell uni-list-cell-last" hover-class="uni-list-cell-hover">
<view class="uni-list-cell-navigate uni-navigate-right">
Item2
</view>
<view class="uni-list-cell-navigate uni-navigate-right">
Item2
</view>
</view>
<view class="uni-list-cell-divider">
右侧带数字角标
右侧带数字角标
</view>
<view class="uni-list-cell" hover-class="uni-list-cell-hover">
<view class="uni-list-cell-navigate">
Item2
Item2
<text class="uni-badge uni-badge-danger">23</text>
</view>
</view>
<view class="uni-list-cell uni-list-cell-last" hover-class="uni-list-cell-hover">
<view class="uni-list-cell-navigate">
Item1
<text class="uni-badge uni-badge-success">123</text>
Item1
<text class="uni-badge uni-badge-success">123</text>
</view>
</view>
<view class="uni-list-cell-divider">
右侧带数字角标+箭头
右侧带数字角标+箭头
</view>
<view class="uni-list-cell" hover-class="uni-list-cell-hover">
<view class="uni-list-cell-navigate uni-navigate-right">
......@@ -42,8 +42,8 @@
</view>
<view class="uni-list-cell uni-list-cell-last" hover-class="uni-list-cell-hover">
<view class="uni-list-cell-navigate uni-navigate-right">
Item2
<text class="uni-badge uni-badge-primary uni-navigate-badge">12</text>
Item2
<text class="uni-badge uni-badge-primary uni-navigate-badge">12</text>
</view>
</view>
</view>
......@@ -66,7 +66,7 @@
<style>
@import "../../../common/uni.css";
.page {
padding-top: 60rpx;
}
......@@ -74,6 +74,4 @@
page {
background: #efeff4;
}
</style>
......@@ -4,13 +4,14 @@
<view class="uni-card">
<view class="uni-list">
<view class="uni-list-cell uni-collapse" v-for="(list,index) in lists" :key="index" :class="index === lists.length - 1 ? 'uni-list-cell-last' : ''">
<view class="uni-list-cell-navigate uni-navigate-bottom" hover-class="uni-list-cell-hover" :class="list.show ? 'uni-active' : ''" @click="trigerCollapse(index)">
{{list.title}}
</view>
<view class="uni-list uni-collapse" :class="list.show ? 'uni-active' : ''">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key) in list.item" :key="key" :class="key === list.item.length - 1 ? 'uni-list-cell-last' : ''">
<view class="uni-list-cell-navigate uni-navigate-right"> {{item}} </view>
</view>
<view class="uni-list-cell-navigate uni-navigate-bottom" hover-class="uni-list-cell-hover" :class="list.show ? 'uni-active' : ''"
@click="trigerCollapse(index)">
{{list.title}}
</view>
<view class="uni-list uni-collapse" :class="list.show ? 'uni-active' : ''">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key) in list.item" :key="key" :class="key === list.item.length - 1 ? 'uni-list-cell-last' : ''">
<view class="uni-list-cell-navigate uni-navigate-right"> {{item}} </view>
</view>
</view>
</view>
</view>
......@@ -24,35 +25,34 @@
export default {
data: {
title: 'list-with-collapses',
lists:[
{
title:"产品",
show:false,
item:["iOS","Android","HTML5"]
lists: [{
title: "产品",
show: false,
item: ["iOS", "Android", "HTML5"]
},
{
title:"方案",
show:false,
item:["PC方案","手机方案","TV方案"]
title: "方案",
show: false,
item: ["PC方案", "手机方案", "TV方案"]
},
{
title:"新闻",
show:false,
item:["公司新闻","行业新闻"]
title: "新闻",
show: false,
item: ["公司新闻", "行业新闻"]
}
]
},
methods: {
trigerCollapse(e) {
trigerCollapse(e) {
for (let i = 0, len = this.lists.length; i < len; ++i) {
if (e === i) {
this.lists[i].show = !this.lists[i].show;
} else {
this.lists[i].show = false;
}
if (e === i) {
this.lists[i].show = !this.lists[i].show;
} else {
this.lists[i].show = false;
}
}
}
}
},
components: {
pageHead
......@@ -62,7 +62,7 @@
<style>
@import "../../../common/uni.css";
.page {
padding-top: 60rpx;
}
......
......@@ -3,31 +3,31 @@
<page-head :title="title"></page-head>
<view class="title">缩略图居左</view>
<view class="uni-list">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in date" :key="key">
<view class="uni-media-list">
<image class="uni-media-list-logo" :src="value.img"></image>
<view class="uni-media-list-body">
<view class="uni-media-list-text-top">{{value.title}}</view>
<view class="uni-media-list-text-bottom uni-ellipsis">{{value.content}}</view>
</view>
</view>
</view>
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in date" :key="key">
<view class="uni-media-list">
<image class="uni-media-list-logo" :src="value.img"></image>
<view class="uni-media-list-body">
<view class="uni-media-list-text-top">{{value.title}}</view>
<view class="uni-media-list-text-bottom uni-ellipsis">{{value.content}}</view>
</view>
</view>
</view>
</view>
<view class="title">缩略图居右</view>
<view class="uni-list">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in date" :key="key">
<view class="uni-media-list uni-pull-right">
<image class="uni-media-list-logo" :src="value.img"></image>
<view class="uni-media-list-body">
<view class="uni-media-list-text-top">{{value.title}}</view>
<view class="uni-media-list-text-bottom uni-ellipsis">{{value.content}}</view>
</view>
</view>
</view>
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in date" :key="key">
<view class="uni-media-list uni-pull-right">
<image class="uni-media-list-logo" :src="value.img"></image>
<view class="uni-media-list-body">
<view class="uni-media-list-text-top">{{value.title}}</view>
<view class="uni-media-list-text-bottom uni-ellipsis">{{value.content}}</view>
</view>
</view>
</view>
</view>
<view class="title">右侧带箭头</view>
<view class="uni-list">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in date" :key="key">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in date" :key="key">
<view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">
<image class="uni-media-list-logo" :src="value.img"></image>
<view class="uni-media-list-body">
......@@ -35,20 +35,20 @@
<view class="uni-media-list-text-bottom uni-ellipsis">{{value.content}}</view>
</view>
</view>
</view>
</view>
</view>
<view class="title">卡片列表</view>
<view class="uni-card">
<view class="uni-list">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in date" :key="key">
<view class="uni-media-list uni-pull-right">
<image class="uni-media-list-logo" :src="value.img"></image>
<view class="uni-media-list-body">
<view class="uni-media-list-text-top">{{value.title}}</view>
<view class="uni-media-list-text-bottom uni-ellipsis">{{value.content}}</view>
</view>
</view>
</view>
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in date" :key="key">
<view class="uni-media-list uni-pull-right">
<image class="uni-media-list-logo" :src="value.img"></image>
<view class="uni-media-list-body">
<view class="uni-media-list-text-top">{{value.title}}</view>
<view class="uni-media-list-text-bottom uni-ellipsis">{{value.content}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
......@@ -59,8 +59,7 @@
export default {
data: {
title: 'media-list',
date: [
{
date: [{
title: "幸福",
content: "能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?",
img: "../../../static/shuijiao.jpg"
......@@ -85,11 +84,12 @@
<style>
@import "../../../common/uni.css";
.page {
background: #efeff4;
}
.title{
.title {
padding: 10px;
}
</style>
\ No newline at end of file
</style>
......@@ -72,7 +72,7 @@
left: 0;
background-color: rgba(0, 0, 0, .3);
}
.popup {
position: absolute;
z-index: 999;
......@@ -80,7 +80,7 @@
-webkit-box-shadow: 0 0 30rpx rgba(0, 0, 0, .1);
box-shadow: 0 0 30rpx rgba(0, 0, 0, .1);
}
.popup-middle {
width: 400rpx;
height: 400rpx;
......@@ -91,43 +91,43 @@
left: 0;
margin: auto;
}
.popup-top {
top: 0;
width: 100%;
height: 100rpx;
text-align: center;
}
.popup-top text {
line-height: 100rpx;
margin-left: 20rpx;
font-size: 32rpx;
}
.popup-bottom {
bottom: 0;
width: 100%;
height: 100rpx;
text-align: center;
}
.popup-bottom text {
line-height: 100rpx;
font-size: 32rpx;
}
.popup .list-view {
height: 600rpx;
}
.list-view-item {
position: relative;
padding: 22rpx 30rpx;
overflow: hidden;
font-size: 28rpx;
}
.list-view-item::after {
position: absolute;
right: 0;
......@@ -139,11 +139,11 @@
transform: scaleY(.5);
background-color: #c8c7cc;
}
.btn-row .btn {
margin: 20rpx;
}
.desc {
padding: 10rpx 20rpx;
font-size: 30rpx;
......@@ -151,4 +151,4 @@
margin-top: 150rpx;
text-align: center;
}
</style>
\ No newline at end of file
</style>
<template>
<view class="index">
<scroll-view id="tab-bar" class="swiper-tab" scroll-x :scroll-left="scrollLeft" >
<scroll-view id="tab-bar" class="swiper-tab" scroll-x :scroll-left="scrollLeft">
<block v-for="(tab,index) in tabs" :key="tab.id">
<view :class="['swiper-tab-list',currentTab==index ? 'on' : '']" :id="tab.id" :data-current="index" @tap="swichNav">{{tab.name}}</view>
</block>
......@@ -23,8 +23,8 @@
data() {
return {
title: 'tabbar',
scrollLeft:0,
isClickChange:false,
scrollLeft: 0,
isClickChange: false,
currentTab: 0,
tabs: [{
name: '关注',
......@@ -61,74 +61,86 @@
this.newsitems = this.randomfn()
},
methods: {
bindChange:async function (e) {
bindChange: async function (e) {
let index = e.target.current;
if(this.isClickChange){
this.currentTab = index;
this.isClickChange = false;
return;
if (this.isClickChange) {
this.currentTab = index;
this.isClickChange = false;
return;
}
let tabBar = await this.getWidth("tab-bar"),tabBarScrollLeft = tabBar.scrollLeft;
console.log("tabBar"+tabBarScrollLeft);
let tabBar = await this.getWidth("tab-bar"),
tabBarScrollLeft = tabBar.scrollLeft;
console.log("tabBar" + tabBarScrollLeft);
let width = 0;
for(let i = 0;i<index;i++){
let result = await this.getWidth(this.tabs[i].id);
width += result.width;
for (let i = 0; i < index; i++) {
let result = await this.getWidth(this.tabs[i].id);
width += result.width;
}
let winWidth = uni.getSystemInfoSync().windowWidth,nowElement = await this.getWidth(this.tabs[index].id),nowWidth = nowElement.width;
console.log("scrollLeft=",this.scrollLeft,";width=",width,";nowWidth=",nowWidth); //左边距离不够向左滑动时滑动距离登录左边元素宽度之和;右边距离不够向右滑动,滑动距离是前面所有元素宽之和+当前元素宽-屏幕的宽度。
if(width + nowWidth - tabBarScrollLeft > winWidth){
console.log("向右移动")
this.scrollLeft = width + nowWidth - winWidth;
let winWidth = uni.getSystemInfoSync().windowWidth,
nowElement = await this.getWidth(this.tabs[index].id),
nowWidth = nowElement.width;
console.log("scrollLeft=", this.scrollLeft, ";width=", width, ";nowWidth=", nowWidth); //左边距离不够向左滑动时滑动距离登录左边元素宽度之和;右边距离不够向右滑动,滑动距离是前面所有元素宽之和+当前元素宽-屏幕的宽度。
if (width + nowWidth - tabBarScrollLeft > winWidth) {
console.log("向右移动")
this.scrollLeft = width + nowWidth - winWidth;
}
if(width < tabBarScrollLeft){
console.log("向左移动");
this.scrollLeft = width;
if (width < tabBarScrollLeft) {
console.log("向左移动");
this.scrollLeft = width;
}
this.isClickChange = false;
this.currentTab = index;//一旦访问data就会出问题
this.currentTab = index; //一旦访问data就会出问题
},
getWidth:function(id){//得到元素的宽高
return new Promise((res,rej) => {
uni.createSelectorQuery().select("#"+id).fields({
size: true,
scrollOffset: true
}, function(data){
if(id ==='tab-bar'){console.log("id=",id,"数据:",data)}
res(data);
}).exec();
})
getWidth: function (id) { //得到元素的宽高
return new Promise((res, rej) => {
uni.createSelectorQuery().select("#" + id).fields({
size: true,
scrollOffset: true
}, function (data) {
if (id === 'tab-bar') {
console.log("id=", id, "数据:", data)
}
res(data);
}).exec();
})
},
swichNav: async function (e) {//点击tab-bar
swichNav: async function (e) { //点击tab-bar
if (this.currentTab === e.target.dataset.current) {
return false;
} else {
let tabBar = await this.getWidth("tab-bar"),tabBarScrollLeft = tabBar.scrollLeft;//点击的时候记录并设置scrollLeft
console.log("tabBar"+tabBarScrollLeft);
this.scrollLeft = tabBarScrollLeft;
this.isClickChange = true;
this.currentTab = e.target.dataset.current
let tabBar = await this.getWidth("tab-bar"),
tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft
console.log("tabBar" + tabBarScrollLeft);
this.scrollLeft = tabBarScrollLeft;
this.isClickChange = true;
this.currentTab = e.target.dataset.current
}
},
loadMore:function(e){
let last = this.newsitems[e][this.newsitems[e].length-1].label,
name = this.newsitems[e][this.newsitems[e].length-1].name;
for(let i = 1; i<= 10; i++) {
this.newsitems[e].push({name:name,label: i + last});
}
loadMore: function (e) {
let last = this.newsitems[e][this.newsitems[e].length - 1].label,
name = this.newsitems[e][this.newsitems[e].length - 1].name;
for (let i = 1; i <= 10; i++) {
this.newsitems[e].push({
name: name,
label: i + last
});
}
},
randomfn () {
randomfn() {
let ary = [];
for(let i=0,length=this.tabs.length; i < length; i++){
let aryItem = [];
for(let j = 1; j<= 20; j++) {
aryItem.push({name:this.tabs[i].name,label: j});
}
ary.push(aryItem);
for (let i = 0, length = this.tabs.length; i < length; i++) {
let aryItem = [];
for (let j = 1; j <= 20; j++) {
aryItem.push({
name: this.tabs[i].name,
label: j
});
}
ary.push(aryItem);
}
return ary;
}
......@@ -137,11 +149,12 @@
</script>
<style>
.index{
.index {
display: flex;
flex-direction: column;
height: 100vh;
}
.index-bd {
padding: 0 30rpx;
width: 690rpx;
......
<template>
<view class="page">
<view class='feedback-title'>
<text>问题和意见</text>
<text class="feedback-quick" @tap="chooseMsg">快速键入</text>
</view>
<view class="feedback-body">
<textarea auto-focus="true" placeholder="请详细描述你的问题和意见..." v-model="sendDate.content" class="feedback-textare" placeholder-style="font-size:28rpx;"
/>
</view>
<view class='feedback-title'>
<text>图片(选填,提供问题截图,总大小10M以下)</text>
</view>
<view class="feedback-body feedback-uploader">
<view class="uni-uploader">
<view class="uni-uploader-head">
<view class="uni-uploader-title">点击预览图片</view>
<view class="uni-uploader-info">{{imageList.length}}/9</view>
</view>
<view class="uni-uploader-body">
<view class="uni-uploader__files">
<block v-for="(image,index) in imageList" :key="index">
<view class="uni-uploader__file">
<image class="uni-uploader__img" :src="image" @tap="previewImage"></image>
</view>
</block>
</view>
<view class="uni-uploader__input-box">
<view class="uni-uploader__input" @tap="chooseImg"></view>
</view>
</view>
</view>
</view>
<view class='feedback-title'>
<text>QQ/邮箱</text>
</view>
<view class="feedback-body">
<input class="feedback-input" v-model="sendDate.contact" placeholder="(选填,方便我们联系你 )" placeholder-style="font-size:28rpx;"
/>
</view>
<view class='feedback-title feedback-star-view'>
<text>应用评分</text>
<view class="feedback-star-view">
<text class="feedback-star" v-for="(value,key) in stars" :key="key" :class="key < sendDate.score ? 'active' : ''" @tap="chooseStar(value)"></text>
</view>
</view>
<button class="feedback-submit" @tap="send">提交</button>
</view>
</template>
<script>
export default {
data: {
msgContents: ["界面显示错乱", "启动缓慢,卡出翔了", "UI无法直视,丑哭了", "偶发性崩溃"],
stars: [1, 2, 3, 4, 5],
imageList: [],
sendDate: {
score: 0,
content: "",
contact: ""
}
},
onLoad() {
let deviceInfo = {
appid: plus.runtime.appid,
imei: plus.device.imei, //设备标识
p: plus.os.name === 'Android' ? 'a' : 'i', //平台类型,i表示iOS平台,a表示Android平台。
md: plus.device.model, //设备型号
app_version: plus.runtime.version,
plus_version: plus.runtime.innerVersion, //基座版本号
os: plus.os.version,
net: '' + plus.networkinfo.getCurrentType()
}
this.sendDate = Object.assign(deviceInfo, this.sendDate);
},
methods: {
chooseMsg() { //快速输入
uni.showActionSheet({
itemList: this.msgContents,
success: (res) => {
this.sendDate.content = this.msgContents[res.tapIndex];
}
})
},
chooseImg() { //选择图片
uni.chooseImage({
sourceType: ['camera', 'album'],
sizeType: "compressed",
count: 9,
success: (res) => {
this.imageList = res.tempFilePaths;
}
})
},
chooseStar(e) { //点击评星
this.sendDate.score = e;
},
previewImage() { //预览图片
uni.previewImage({
urls: this.imageList
});
},
send() { //发送反馈
console.log(this.sendDate);
let imgs = this.imageList.map((value) => {
return {
name: "uni-app.feedback",
uri: value
}
})
console.log(imgs)
uni.uploadFile({
url: 'https://service.dcloud.net.cn/feedback',
files: imgs,
formData: this.sendDate,
success: (res) => {
if (res.statusCode === 200) {
uni.showToast({
title: "反馈成功!"
})
}
},
fail: (res) => {
console.log(res)
}
});
}
}
}
</script>
<style>
@import "../../../common/uni.css";
page {
background-color: #EFEFF4;
}
</style>
......@@ -24,7 +24,7 @@
data() {
return {
title: 'orientation',
value:''
value: ''
}
},
methods: {
......@@ -69,7 +69,8 @@
background-color: #007aff;
color: #ffffff;
}
textarea{
border: 2rpx solid #7A7E83;
textarea {
border: 2rpx solid #7A7E83;
}
</style>
......@@ -12,7 +12,6 @@
<button @tap="requireTranMsg">发送"透传数据"消息</button>
</view>
</view>
</view>
</template>
<script>
......@@ -23,7 +22,7 @@
return {
title: 'push',
provider: [],
pushServer:'http://demo.dcloud.net.cn/push/?'
pushServer: 'http://demo.dcloud.net.cn/push/?'
}
},
onLoad: function () {
......@@ -39,71 +38,72 @@
});
},
methods: {
openPush(){
openPush() {
uni.subscribePush({
provider:this.provider[0],
provider: this.provider[0],
success: (e) => {
console.log("开启push");
uni.showToast({
title:"已开启push接收"
title: "已开启push接收"
})
}
})
},
closePush(){
closePush() {
uni.unsubscribePush({
provider:this.provider[0],
provider: this.provider[0],
success: (e) => {
console.log("关闭push");
uni.showToast({
title:"已关闭push接收"
title: "已关闭push接收"
})
}
})
},
listenTranMsg(){
listenTranMsg() {
uni.onPush({
provider:this.provider[0],
provider: this.provider[0],
success: (e) => {
console.log("监听透传数据")
uni.showToast({
title:"开始监听透传数据"
title: "开始监听透传数据"
})
},
callback:(e) => {
callback: (e) => {
console.log(123963)
uni.showToast({
title:"接收到透传数据"
title: "接收到透传数据"
});
console.log(123)
console.log(e);
}
})
},
removeTranMsg(){
removeTranMsg() {
uni.offPush({
provider:this.provider[0],
provider: this.provider[0],
success: (e) => {
console.log("移除监听透传数据");
uni.showToast({
title:"移除监听透传数据"
title: "移除监听透传数据"
})
}
})
},
requireTranMsg(){//请求‘透传数据’推送消息
requireTranMsg() { //请求‘透传数据’推送消息
var inf = plus.push.getClientInfo();
var url = this.pushServer+'type=tran&appid='+encodeURIComponent(plus.runtime.appid);
inf.id&&(url+='&id='+inf.id);
url += ('&cid='+encodeURIComponent(inf.clientid));
if(plus.os.name == 'iOS'){
url += ('&token='+encodeURIComponent(inf.token));
var url = this.pushServer + 'type=tran&appid=' + encodeURIComponent(plus.runtime.appid);
inf.id && (url += '&id=' + inf.id);
url += ('&cid=' + encodeURIComponent(inf.clientid));
if (plus.os.name == 'iOS') {
url += ('&token=' + encodeURIComponent(inf.token));
}
url += ('&title='+encodeURIComponent('Hello H5+'));
url += ('&content='+encodeURIComponent('带透传数据推送通知,可通过plus.push API获取数据并进行业务逻辑处理!'));
url += ('&payload='+encodeURIComponent('{"title":"Hello H5+ Test","content":"test content","payload":"1234567890"}'));
url += ('&version='+encodeURIComponent(plus.runtime.version));
plus.runtime.openURL( url );
url += ('&title=' + encodeURIComponent('Hello H5+'));
url += ('&content=' + encodeURIComponent('带透传数据推送通知,可通过plus.push API获取数据并进行业务逻辑处理!'));
url += ('&payload=' + encodeURIComponent(
'{"title":"Hello H5+ Test","content":"test content","payload":"1234567890"}'));
url += ('&version=' + encodeURIComponent(plus.runtime.version));
plus.runtime.openURL(url);
}
},
components: {
......@@ -113,7 +113,6 @@
</script>
<style>
button {
background-color: #007aff;
color: #ffffff;
......
......@@ -67,21 +67,21 @@
methods: {
share(e) {
console.log("分享~", e);
uni.share({
provider: e.id,
scene:"WXSceneSession",//WXSceneSession”分享到聊天界面,“WXSenceTimeline”分享到朋友圈,“WXSceneFavorite”分享到微信收藏
type:0,
title:this.shareText,
imageUrl :this.image,
href:"http://www.dcloud.io",
success:(e) => {
console.log("success",e)
scene: "WXSceneSession", //WXSceneSession”分享到聊天界面,“WXSenceTimeline”分享到朋友圈,“WXSceneFavorite”分享到微信收藏
type: 0,
title: this.shareText,
imageUrl: this.image,
href: "http://www.dcloud.io",
success: (e) => {
console.log("success", e)
},
fail:(e) => {
console.log("fail",e)
fail: (e) => {
console.log("fail", e)
uni.showToast({
title:e.errMsg
title: e.errMsg
})
}
})
......@@ -105,7 +105,7 @@
<style>
@import "../../../common/uni.css";
.textarea-wrp {
padding: 0 20rpx;
}
......
......@@ -11,12 +11,11 @@
</view>
</view>
</view>
</view>
</template>
<script>
import pageHead from '../../../components/page-head.vue'
export default {
data() {
return {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册