初始化（包含登录模块）
This commit is contained in:
96
pages/component/ad/ad.vue
Normal file
96
pages/component/ad/ad.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="ad-view">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<ad :unit-id="unitId" type="feed" @load="adload" @error="aderror"/>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<ad adpid="1111111111" @load="adload" @error="aderror"/>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="ad-tips" v-if="!isLoad">
|
||||
<text>{{adMessage}}</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<view class="ad-tips">
|
||||
<text>小程序端的广告ID由小程序平台提供</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="tips">
|
||||
<text class="tips-text">本示例页面仅演示ad组件。另点此可体验</text><text class="tips-hl" @click="gotoapi">激励视频API</text><text class="tips-text">。</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'AD组件',
|
||||
unitId: '',
|
||||
isLoad: false,
|
||||
adMessage: "广告加载中..."
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.unitId = '';
|
||||
// #endif
|
||||
// #ifdef MP-TOUTIAO
|
||||
this.unitId = ''
|
||||
// #endif
|
||||
// #ifdef MP-QQ
|
||||
this.unitId = ''
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
adload() {
|
||||
this.isLoad = true;
|
||||
},
|
||||
aderror(e) {
|
||||
this.adMessage = e.detail.errMsg;
|
||||
},
|
||||
gotoapi() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/API/rewarded-video-ad/rewarded-video-ad"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
background-color: #DBDBDB;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.ad-view {
|
||||
background-color: #FFFFFF;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ad-tips {
|
||||
color: #999;
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.tips-text {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.tips-hl {
|
||||
color: #007AFF;
|
||||
margin-left: 1px;
|
||||
}
|
||||
</style>
|
||||
29
pages/component/audio/audio.vue
Normal file
29
pages/component/audio/audio.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head title="audio"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-center">
|
||||
<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author"
|
||||
:action="audioAction" controls></audio>
|
||||
<view class="">audio组件不再维护，建议使用能力更强的uni.createInnerAudioContext()</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: {
|
||||
poster: 'https://web-assets.dcloud.net.cn/unidoc/zh/Alice.jpeg',
|
||||
name: '致爱丽丝',
|
||||
author: '暂无',
|
||||
src: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
|
||||
},
|
||||
audioAction: {
|
||||
method: 'pause'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
81
pages/component/button/button.vue
Normal file
81
pages/component/button/button.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<button type="primary">页面主操作 Normal</button>
|
||||
<button type="primary" :loading="loading">页面主操作 Loading</button>
|
||||
<button type="primary" disabled="true">页面主操作 Disabled</button>
|
||||
|
||||
<button type="default">页面次要操作 Normal</button>
|
||||
<button type="default" disabled="true">页面次要操作 Disabled</button>
|
||||
|
||||
<button type="warn">警告类操作 Normal</button>
|
||||
<button type="warn" disabled="true">警告类操作 Disabled</button>
|
||||
|
||||
<view class="button-sp-area">
|
||||
<button type="primary" plain="true">按钮</button>
|
||||
<button type="primary" disabled="true" plain="true">不可点击的按钮</button>
|
||||
|
||||
<button type="default" plain="true">按钮</button>
|
||||
<button type="default" disabled="true" plain="true">按钮</button>
|
||||
|
||||
<button class="mini-btn" type="primary" size="mini">按钮</button>
|
||||
<button class="mini-btn" type="default" size="mini">按钮</button>
|
||||
<button class="mini-btn" type="warn" size="mini">按钮</button>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN || MP-QQ || MP-JD -->
|
||||
<button open-type="launchApp" app-parameter="uni-app" @error="openTypeError">打开APP</button>
|
||||
<button open-type="feedback">意见反馈</button>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'button',
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this._timer = null;
|
||||
},
|
||||
onShow() {
|
||||
this.clearTimer();
|
||||
this._timer = setTimeout(() => {
|
||||
this.loading = true;
|
||||
}, 300)
|
||||
},
|
||||
onUnload() {
|
||||
this.clearTimer();
|
||||
this.loading = false;
|
||||
},
|
||||
methods: {
|
||||
openTypeError(error) {
|
||||
console.error('open-type error:', error);
|
||||
},
|
||||
clearTimer() {
|
||||
if (this._timer != null) {
|
||||
clearTimeout(this._timer);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
button {
|
||||
margin-top: 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.button-sp-area {
|
||||
margin: 0 auto;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.mini-btn {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
</style>
|
||||
263
pages/component/canvas/canvas.vue
Normal file
263
pages/component/canvas/canvas.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="page-body">
|
||||
<view class="page-body-wrapper">
|
||||
<!-- #ifdef APP-PLUS || H5 -->
|
||||
<canvas canvas-id="canvas" class="canvas" :start="startStatus" :change:start="animate.start"
|
||||
:data-width="canvasWidth" :data-height="canvasWidth"></canvas>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS || H5 -->
|
||||
<canvas canvas-id="canvas" id="canvas" class="canvas"></canvas>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script module="animate" lang="renderjs">
|
||||
function Ball({
|
||||
x,
|
||||
y,
|
||||
vx,
|
||||
vy,
|
||||
canvasWidth,
|
||||
canvasHeight,
|
||||
ctx
|
||||
}) {
|
||||
this.canvasWidth = canvasWidth
|
||||
this.canvasHeight = canvasHeight
|
||||
this.ctx = ctx
|
||||
this.x = x
|
||||
this.y = y
|
||||
this.vx = vx
|
||||
this.vy = vy
|
||||
this.radius = 5
|
||||
}
|
||||
|
||||
Ball.prototype.draw = function() {
|
||||
this.ctx.beginPath()
|
||||
this.ctx.fillStyle = '#007AFF'
|
||||
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
|
||||
this.ctx.closePath()
|
||||
this.ctx.fill()
|
||||
}
|
||||
|
||||
Ball.prototype.move = function() {
|
||||
this.x += this.vx
|
||||
this.y += this.vy
|
||||
// 回到中心
|
||||
// if (getDistance(this.x - this.canvasWidth / 2, this.y - this.canvasHeight / 2) >
|
||||
// getDistance(this.canvasWidth / 2, this.canvasHeight / 2) + this.radius) {
|
||||
// this.x = this.canvasWidth / 2
|
||||
// this.y = this.canvasHeight / 2
|
||||
// }
|
||||
|
||||
// 边框反弹
|
||||
if (this.x < this.radius) {
|
||||
this.vx = Math.abs(this.vx)
|
||||
return
|
||||
}
|
||||
if (this.x > this.canvasWidth - this.radius) {
|
||||
this.vx = -Math.abs(this.vx)
|
||||
}
|
||||
if (this.y < this.radius) {
|
||||
this.vy = Math.abs(this.vy)
|
||||
return
|
||||
}
|
||||
if (this.y > this.canvasWidth - this.radius) {
|
||||
this.vy = -Math.abs(this.vy)
|
||||
}
|
||||
}
|
||||
|
||||
function getDistance(x, y) {
|
||||
return Math.pow(Math.pow(x, 2) + Math.pow(y, 2), 0.5)
|
||||
}
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
start(newVal, oldVal, owner, ins) {
|
||||
let canvasWidth = ins.getDataset().width,
|
||||
canvasHeight = ins.getDataset().height,
|
||||
canvasEle = document.querySelectorAll('.canvas>canvas')[0],
|
||||
ctx = canvasEle.getContext('2d'),
|
||||
speed = 3,
|
||||
ballList = [],
|
||||
layer = 3,
|
||||
ballInlayer = 20
|
||||
for (let i = 0; i < layer; i++) {
|
||||
let radius = getDistance(canvasWidth / 2, canvasHeight / 2) / layer * i
|
||||
for (let j = 0; j < ballInlayer; j++) {
|
||||
let deg = j * 2 * Math.PI / ballInlayer,
|
||||
sin = Math.sin(deg),
|
||||
cos = Math.cos(deg),
|
||||
x = radius * cos + canvasWidth / 2,
|
||||
y = radius * sin + canvasHeight / 2,
|
||||
vx = speed * cos,
|
||||
vy = speed * sin
|
||||
ballList.push(new Ball({
|
||||
x,
|
||||
y,
|
||||
vx,
|
||||
vy,
|
||||
canvasWidth,
|
||||
canvasHeight,
|
||||
ctx,
|
||||
radius: 5
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
function animate(ballList) {
|
||||
ctx.clearRect(0, 0, canvasEle.width, canvasEle.height)
|
||||
ballList.forEach(function(item) {
|
||||
item.move()
|
||||
item.draw()
|
||||
})
|
||||
requestAnimationFrame(function() {
|
||||
animate(ballList)
|
||||
})
|
||||
}
|
||||
animate(ballList)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// #ifndef APP-PLUS || H5
|
||||
|
||||
let ctx = null,
|
||||
interval = null;
|
||||
|
||||
function Ball(x, y, vx, vy, canvasWidth, canvasHeight, ctx) {
|
||||
this.canvasWidth = canvasWidth
|
||||
this.canvasHeight = canvasHeight
|
||||
this.ctx = ctx
|
||||
this.x = x
|
||||
this.y = y
|
||||
this.vx = vx
|
||||
this.vy = vy
|
||||
this.radius = 5
|
||||
}
|
||||
|
||||
Ball.prototype.draw = function() {
|
||||
this.ctx.setFillStyle('#007AFF')
|
||||
this.ctx.beginPath()
|
||||
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
|
||||
this.ctx.closePath()
|
||||
this.ctx.fill()
|
||||
}
|
||||
|
||||
Ball.prototype.move = function() {
|
||||
this.x += this.vx
|
||||
this.y += this.vy
|
||||
// 回到中心
|
||||
// if (getDistance(this.x - this.canvasWidth / 2, this.y - this.canvasHeight / 2) >
|
||||
// getDistance(this.canvasWidth / 2, this.canvasHeight / 2) + this.radius) {
|
||||
// this.x = this.canvasWidth / 2
|
||||
// this.y = this.canvasHeight / 2
|
||||
// }
|
||||
|
||||
// 边框反弹
|
||||
if (this.x < this.radius) {
|
||||
this.vx = Math.abs(this.vx)
|
||||
return
|
||||
}
|
||||
if (this.x > this.canvasWidth - this.radius) {
|
||||
this.vx = -Math.abs(this.vx)
|
||||
}
|
||||
if (this.y < this.radius) {
|
||||
this.vy = Math.abs(this.vy)
|
||||
return
|
||||
}
|
||||
if (this.y > this.canvasWidth - this.radius) {
|
||||
this.vy = -Math.abs(this.vy)
|
||||
}
|
||||
}
|
||||
|
||||
function getDistance(x, y) {
|
||||
return Math.pow(Math.pow(x, 2) + Math.pow(y, 2), 0.5)
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'canvas',
|
||||
canvasWidth: 0,
|
||||
startStatus: false,
|
||||
ballList: []
|
||||
}
|
||||
},
|
||||
onReady: function() {
|
||||
this.$nextTick(() => {
|
||||
uni.createSelectorQuery().select(".canvas").boundingClientRect(data => {
|
||||
this.canvasWidth = data.width
|
||||
// #ifdef APP-PLUS || H5
|
||||
this.startStatus = true
|
||||
// #endif
|
||||
// #ifndef APP-PLUS || H5
|
||||
ctx = uni.createCanvasContext('canvas')
|
||||
this.drawBall()
|
||||
// #endif
|
||||
}).exec()
|
||||
})
|
||||
},
|
||||
// #ifndef APP-PLUS || H5
|
||||
onUnload: function() {
|
||||
clearInterval(interval);
|
||||
},
|
||||
methods: {
|
||||
drawBall: function() {
|
||||
let canvasWidth = this.canvasWidth,
|
||||
canvasHeight = this.canvasWidth,
|
||||
speed = 3,
|
||||
ballList = [],
|
||||
layer = 3,
|
||||
ballInlayer = 20
|
||||
for (let i = 0; i < layer; i++) {
|
||||
let radius = getDistance(canvasWidth / 2, canvasHeight / 2) / layer * i
|
||||
for (let j = 0; j < ballInlayer; j++) {
|
||||
let deg = j * 2 * Math.PI / ballInlayer,
|
||||
sin = Math.sin(deg),
|
||||
cos = Math.cos(deg),
|
||||
x = radius * cos + canvasWidth / 2,
|
||||
y = radius * sin + canvasHeight / 2,
|
||||
vx = speed * cos,
|
||||
vy = speed * sin
|
||||
ballList.push(new Ball(x, y, vx, vy, canvasWidth, canvasHeight, ctx))
|
||||
}
|
||||
}
|
||||
|
||||
function animate(ballList) {
|
||||
// ctx.clearRect(0, 0, canvasWidth, canvasHeight)
|
||||
ballList.forEach(function(item) {
|
||||
item.move()
|
||||
item.draw()
|
||||
})
|
||||
ctx.draw()
|
||||
}
|
||||
|
||||
interval = setInterval(function() {
|
||||
animate(ballList)
|
||||
}, 17)
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page-body-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
width: 610rpx;
|
||||
height: 610rpx;
|
||||
margin: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
101
pages/component/checkbox/checkbox.vue
Normal file
101
pages/component/checkbox/checkbox.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">默认样式</view>
|
||||
<view>
|
||||
<checkbox-group>
|
||||
<label>
|
||||
<checkbox value="cb1" checked="true" />选中
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="cb" />未选中
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">不同颜色和尺寸的checkbox</view>
|
||||
<view>
|
||||
<checkbox-group>
|
||||
<label>
|
||||
<checkbox value="cb1" checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title uni-common-mt">
|
||||
推荐展示样式
|
||||
<text>\n使用 uni-list 布局</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-list">
|
||||
<checkbox-group @change="checkboxChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
|
||||
<view>
|
||||
<checkbox :value="item.value" :checked="item.checked" />
|
||||
</view>
|
||||
<view>{{item.name}}</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'checkbox 复选框',
|
||||
items: [{
|
||||
value: 'USA',
|
||||
name: '美国'
|
||||
},
|
||||
{
|
||||
value: 'CHN',
|
||||
name: '中国',
|
||||
checked: 'true'
|
||||
},
|
||||
{
|
||||
value: 'BRA',
|
||||
name: '巴西'
|
||||
},
|
||||
{
|
||||
value: 'JPN',
|
||||
name: '日本'
|
||||
},
|
||||
{
|
||||
value: 'ENG',
|
||||
name: '英国'
|
||||
},
|
||||
{
|
||||
value: 'FRA',
|
||||
name: '法国'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkboxChange: function (e) {
|
||||
var items = this.items,
|
||||
values = e.detail.value;
|
||||
for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
||||
const item = items[i]
|
||||
if(values.indexOf(item.value) >= 0){
|
||||
this.$set(item,'checked',true)
|
||||
}else{
|
||||
this.$set(item,'checked',false)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-list-cell {
|
||||
justify-content: flex-start
|
||||
}
|
||||
</style>
|
||||
63
pages/component/cover-view/cover-view.nvue
Normal file
63
pages/component/cover-view/cover-view.nvue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<view>
|
||||
<video ref="video" id="myVideo" class="video" :src="src" controls="true">
|
||||
<cover-view class="coverview" style="overflow-y: scroll;">
|
||||
<text class="text">{{ '\uEA06\uEA0E\uEA0C\uEA0A 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view' }}</text>
|
||||
</cover-view>
|
||||
</video>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'cover-view',
|
||||
src: "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v"
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
text-align: center;
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #4CD964;
|
||||
font-family: unincomponents;
|
||||
}
|
||||
|
||||
.video {
|
||||
width: 750rpx;
|
||||
height: 400rpx;
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
.coverview {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0rpx;
|
||||
height: 150rpx;
|
||||
border-width: 10rpx;
|
||||
border-color: #4CD964;
|
||||
}
|
||||
</style>
|
||||
86
pages/component/cover-view/cover-view.vue
Normal file
86
pages/component/cover-view/cover-view.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head title="cover-view用于覆盖map、video等原生组件"></page-head>
|
||||
<view class="cover-content" v-if="showMap">
|
||||
<!-- TODO暂时条件编译解决支付宝小程序不能正常显示 cover-x -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<map>
|
||||
<cover-view class="cover-view">简单的cover-view</cover-view>
|
||||
<cover-image class="cover-image" src="/static/uni.png"></cover-image>
|
||||
</map>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<!-- #ifndef MP-QQ -->
|
||||
<map></map>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- TODO QQ暂不支持地图组件 -->
|
||||
<!-- #ifdef MP-QQ -->
|
||||
<video class="video" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v"></video>
|
||||
<!-- #endif -->
|
||||
|
||||
<cover-view class="cover-view">简单的cover-view</cover-view>
|
||||
<!-- #ifndef MP-QQ -->
|
||||
<cover-image class="cover-image" src="/static/uni.png"></cover-image>
|
||||
<!-- #endif -->
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showMap: false
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef APP-PLUS || MP-BAIDU
|
||||
setTimeout(()=>{
|
||||
this.showMap = true
|
||||
},350)
|
||||
// #endif
|
||||
// #ifndef APP-PLUS || MP-BAIDU
|
||||
this.showMap = true
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
map {
|
||||
width: 750rpx;
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cover-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cover-view {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
width: 375rpx;
|
||||
text-align: center;
|
||||
background-color: #DDDDDD;
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
</style>
|
||||
238
pages/component/editor/editor-icon.css
Normal file
238
pages/component/editor/editor-icon.css
Normal file
File diff suppressed because one or more lines are too long
207
pages/component/editor/editor.vue
Normal file
207
pages/component/editor/editor.vue
Normal file
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="page-body">
|
||||
<view class='wrapper'>
|
||||
<view class='toolbar' @tap="format" style="height: 120px;overflow-y: auto;">
|
||||
<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view>
|
||||
<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></view>
|
||||
<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></view>
|
||||
<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></view>
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align" data-value="left"></view>
|
||||
<!-- #endif -->
|
||||
<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align" data-value="center"></view>
|
||||
<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi" data-name="align" data-value="right"></view>
|
||||
<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi" data-name="align" data-value="justify"></view>
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height" data-name="lineHeight" data-value="2"></view>
|
||||
<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing" data-name="letterSpacing" data-value="2em"></view>
|
||||
<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju" data-name="marginTop" data-value="20px"></view>
|
||||
<view :class="formats.marginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju" data-name="marginBottom" data-value="20px"></view>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
|
||||
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font" data-name="fontFamily" data-value="Pacifico"></view>
|
||||
<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize" data-name="fontSize" data-value="24px"></view>
|
||||
<!-- #endif -->
|
||||
<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color" data-name="color" data-value="#0000ff"></view>
|
||||
<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''" class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00"></view>
|
||||
<view class="iconfont icon-date" @tap="insertDate"></view>
|
||||
<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
|
||||
<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie" data-name="list" data-value="ordered"></view>
|
||||
<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list" data-value="bullet"></view>
|
||||
|
||||
<view class="iconfont icon-undo" @tap="undo"></view>
|
||||
<view class="iconfont icon-redo" @tap="redo"></view>
|
||||
|
||||
<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
|
||||
<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
|
||||
<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
|
||||
<view class="iconfont icon-charutupian" @tap="insertImage"></view>
|
||||
<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header" :data-value="1"></view>
|
||||
<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script" data-value="sub"></view>
|
||||
<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" data-name="script" data-value="super"></view>
|
||||
|
||||
<view class="iconfont icon-shanchu" @tap="clear"></view>
|
||||
|
||||
<view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl" data-name="direction" data-value="rtl"></view>
|
||||
</view>
|
||||
|
||||
<view class="editor-wrapper">
|
||||
<editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size show-img-toolbar
|
||||
show-img-resize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady">
|
||||
</editor>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
readOnly: false,
|
||||
formats: {}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// #ifndef MP-BAIDU
|
||||
uni.loadFontFace({
|
||||
family: 'Pacifico',
|
||||
source: 'url("https://sungd.github.io/Pacifico.ttf")'
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
readOnlyChange() {
|
||||
this.readOnly = !this.readOnly
|
||||
},
|
||||
onEditorReady() {
|
||||
// #ifdef MP-BAIDU
|
||||
this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS || MP-WEIXIN || H5
|
||||
uni.createSelectorQuery().select('#editor').context((res) => {
|
||||
this.editorCtx = res.context
|
||||
}).exec()
|
||||
// #endif
|
||||
},
|
||||
undo() {
|
||||
this.editorCtx.undo()
|
||||
},
|
||||
redo() {
|
||||
this.editorCtx.redo()
|
||||
},
|
||||
format(e) {
|
||||
let {
|
||||
name,
|
||||
value
|
||||
} = e.target.dataset
|
||||
if (!name) return
|
||||
// console.log('format', name, value)
|
||||
this.editorCtx.format(name, value)
|
||||
},
|
||||
onStatusChange(e) {
|
||||
const formats = e.detail
|
||||
this.formats = formats
|
||||
},
|
||||
insertDivider() {
|
||||
this.editorCtx.insertDivider({
|
||||
success: function() {
|
||||
console.log('insert divider success')
|
||||
}
|
||||
})
|
||||
},
|
||||
clear() {
|
||||
uni.showModal({
|
||||
title: '清空编辑器',
|
||||
content: '确定清空编辑器全部内容？',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.editorCtx.clear({
|
||||
success: function(res) {
|
||||
console.log("clear success")
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
removeFormat() {
|
||||
this.editorCtx.removeFormat()
|
||||
},
|
||||
insertDate() {
|
||||
const date = new Date()
|
||||
const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
|
||||
this.editorCtx.insertText({
|
||||
text: formatDate
|
||||
})
|
||||
},
|
||||
insertImage() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
this.editorCtx.insertImage({
|
||||
src: res.tempFilePaths[0],
|
||||
alt: '图像',
|
||||
success: function() {
|
||||
console.log('insert image success')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "./editor-icon.css";
|
||||
|
||||
.page-body {
|
||||
height: calc(100vh - var(--window-top) - var(--status-bar-height));
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.editor-wrapper {
|
||||
height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
padding: 8px 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
box-sizing: border-box;
|
||||
border-bottom: 0;
|
||||
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.ql-container {
|
||||
box-sizing: border-box;
|
||||
padding: 12px 15px;
|
||||
width: 100%;
|
||||
min-height: 30vh;
|
||||
height: 100%;
|
||||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.ql-active {
|
||||
color: #06c;
|
||||
}
|
||||
</style>
|
||||
BIN
pages/component/editor/iconfont.ttf
Normal file
BIN
pages/component/editor/iconfont.ttf
Normal file
Binary file not shown.
86
pages/component/form/form.vue
Normal file
86
pages/component/form/form.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head title="form"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<form @submit="formSubmit" @reset="formReset">
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">姓名</view>
|
||||
<input class="uni-input" name="nickname" placeholder="请输入姓名" />
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">性别</view>
|
||||
<radio-group name="gender">
|
||||
<label>
|
||||
<radio value="男" /><text>男</text>
|
||||
</label>
|
||||
<label>
|
||||
<radio value="女" /><text>女</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">爱好</view>
|
||||
<checkbox-group name="loves">
|
||||
<label>
|
||||
<checkbox value="读书" /><text>读书</text>
|
||||
</label>
|
||||
<label>
|
||||
<checkbox value="写字" /><text>写字</text>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">年龄</view>
|
||||
<slider value="20" name="age" show-value></slider>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">保留选项</view>
|
||||
<view>
|
||||
<switch name="switch" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button form-type="submit">Submit</button>
|
||||
<button type="default" form-type="reset">Reset</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import graceChecker from "../../../common/graceChecker.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formSubmit: function(e) {
|
||||
console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
|
||||
//定义表单规则
|
||||
var rule = [
|
||||
{name:"nickname", checkType : "string", checkRule:"1,3", errorMsg:"姓名应为1-3个字符"},
|
||||
{name:"gender", checkType : "in", checkRule:"男,女", errorMsg:"请选择性别"},
|
||||
{name:"loves", checkType : "notnull", checkRule:"", errorMsg:"请选择爱好"}
|
||||
];
|
||||
//进行表单检查
|
||||
var formData = e.detail.value;
|
||||
var checkRes = graceChecker.check(formData, rule);
|
||||
if(checkRes){
|
||||
uni.showToast({title:"验证通过!", icon:"none"});
|
||||
}else{
|
||||
uni.showToast({ title: graceChecker.error, icon: "none" });
|
||||
}
|
||||
},
|
||||
formReset: function(e) {
|
||||
console.log('清空数据')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-form-item .title {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
</style>
|
||||
34
pages/component/image/image.vue
Normal file
34
pages/component/image/image.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title">
|
||||
示例1 <text>\n本地图片</text>
|
||||
</view>
|
||||
<view class="uni-center" style="background:#FFFFFF; font-size:0;">
|
||||
<image class="image" mode="widthFix" src="../../../static/uni.png" />
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例2 <text>\n网络图片</text>
|
||||
</view>
|
||||
<view class="uni-center" style="background:#FFFFFF; font-size:0;">
|
||||
<image class="image" mode="widthFix" src="https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'image'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.image {
|
||||
margin:40rpx 0;
|
||||
width: 200rpx;
|
||||
}
|
||||
</style>
|
||||
245
pages/component/input/input.nvue
Normal file
245
pages/component/input/input.nvue
Normal file
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<view class="nvue-page-root">
|
||||
<view class="page-title">
|
||||
<view class="page-title__wrapper">
|
||||
<text class="page-title__text">{{title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-common-mt">
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">可自动聚焦的 input</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" focus placeholder="自动获得焦点" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view v-if="platform==='ios'&&!isNvue" class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">隐藏 iOS 软键盘上的导航条</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" placeholder="触摸其他地方收起键盘" @focus="onFocus" @blur="onBlur" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">键盘右下角按钮显示为搜索</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" confirm-type="search" placeholder="键盘右下角按钮显示为搜索" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifndef H5 -->
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">键盘右下角按钮显示为发送</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" confirm-type="send" placeholder="键盘右下角按钮显示为发送" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">控制最大输入长度的 input</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" maxlength="10" placeholder="最大输入长度为10" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">实时获取输入值：{{inputValue}}</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" @input="onKeyInput" placeholder="输入同步到view中" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">控制输入的 input</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" @input="replaceInput" v-model="changeValue" placeholder="连续的两个1会变成2" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifndef MP-BAIDU -->
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">控制键盘的 input</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" ref="input1" @input="hideKeyboard" placeholder="输入123自动收起键盘" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">数字输入的 input</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" type="number" placeholder="这是一个数字输入框" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">密码输入的 input</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" password type="text" placeholder="这是一个密码输入框" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">带小数点的 input</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" type="digit" placeholder="带小数点的数字键盘" /> </view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">身份证输入的 input</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" type="idcard" placeholder="身份证输入键盘" /> </view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">控制占位符颜色的 input</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">带清除按钮的输入框</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />
|
||||
<text class="uni-icon" v-if="showClearIcon" @click="clearIcon"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title"><text class="uni-form-item__title">可查看密码的输入框</text></view>
|
||||
<view class="uni-input-wrapper">
|
||||
<input class="uni-input" placeholder="请输入密码" :password="showPassword" />
|
||||
<text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'input',
|
||||
focus: false,
|
||||
inputValue: '',
|
||||
showClearIcon: false,
|
||||
inputClearValue: '',
|
||||
changeValue: '',
|
||||
showPassword: true,
|
||||
src: '../../../static/eye-1.png',
|
||||
platform: '',
|
||||
isNvue: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onKeyInput: function(event) {
|
||||
this.inputValue = event.detail.value
|
||||
},
|
||||
replaceInput: function(event) {
|
||||
var value = event.detail.value;
|
||||
if (value === '11') {
|
||||
this.changeValue = '2';
|
||||
}
|
||||
},
|
||||
hideKeyboard: function(event) {
|
||||
if (event.detail.value === '123') {
|
||||
uni.hideKeyboard();
|
||||
}
|
||||
},
|
||||
clearInput: function(event) {
|
||||
this.inputClearValue = event.detail.value;
|
||||
if (event.detail.value.length > 0) {
|
||||
this.showClearIcon = true;
|
||||
} else {
|
||||
this.showClearIcon = false;
|
||||
}
|
||||
},
|
||||
clearIcon: function() {
|
||||
this.inputClearValue = '';
|
||||
this.showClearIcon = false;
|
||||
},
|
||||
changePassword: function() {
|
||||
this.showPassword = !this.showPassword;
|
||||
},
|
||||
onFocus() {
|
||||
this.$mp.page.$getAppWebview().setStyle({
|
||||
softinputNavBar: 'none'
|
||||
})
|
||||
},
|
||||
onBlur() {
|
||||
this.$mp.page.$getAppWebview().setStyle({
|
||||
softinputNavBar: 'auto'
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.platform = uni.getSystemInfoSync().platform
|
||||
// #ifdef APP-PLUS-NVUE
|
||||
this.isNvue = true
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nvue-page-root {
|
||||
background-color: #F8F8F8;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 35rpx;
|
||||
}
|
||||
|
||||
.page-title__wrapper {
|
||||
padding: 0px 20px;
|
||||
border-bottom-color: #D8D8D8;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.page-title__text {
|
||||
font-size: 16px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
color: #BEBEBE;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 5px 13px;
|
||||
}
|
||||
|
||||
.uni-form-item__title {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.uni-input-wrapper {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
padding: 8px 13px;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.uni-input {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 15px;
|
||||
padding: 0px;
|
||||
flex: 1;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.uni-icon {
|
||||
font-family: uniicons;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.uni-eye-active {
|
||||
color: #007AFF;
|
||||
}
|
||||
</style>
|
||||
103
pages/component/label/label.vue
Normal file
103
pages/component/label/label.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-common-mt">
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">表单组件在label内</view>
|
||||
<checkbox-group class="uni-list" @change="checkboxChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="item in checkboxItems" :key="item.name">
|
||||
<view>
|
||||
<checkbox :value="item.name" :checked="item.checked"></checkbox>
|
||||
</view>
|
||||
<view>{{item.value}}</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">label用for标识表单组件</view>
|
||||
<radio-group class="uni-list" @change="radioChange">
|
||||
<view class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in radioItems" :key="index">
|
||||
<view>
|
||||
<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
|
||||
</view>
|
||||
<label class="label-2-text" :for="item.name">
|
||||
<text>{{item.value}}</text>
|
||||
</label>
|
||||
</view>
|
||||
</radio-group>
|
||||
</view>
|
||||
|
||||
<view class="uni-form-item uni-column">
|
||||
<view class="title">label内有多个时选中第一个</view>
|
||||
<checkbox-group class="uni-list" @change="checkboxChange">
|
||||
<label class="label-3">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<checkbox class="checkbox-3">选项一</checkbox>
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<checkbox class="checkbox-3">选项二</checkbox>
|
||||
</view>
|
||||
<view class="uni-link uni-center" style="margin-top:20rpx;">点击该label下的文字默认选中第一个checkbox</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'label',
|
||||
checkboxItems: [{
|
||||
name: 'USA',
|
||||
value: '美国'
|
||||
},
|
||||
{
|
||||
name: 'CHN',
|
||||
value: '中国',
|
||||
checked: 'true'
|
||||
}
|
||||
],
|
||||
radioItems: [{
|
||||
name: 'USA',
|
||||
value: '美国'
|
||||
},
|
||||
{
|
||||
name: 'CHN',
|
||||
value: '中国',
|
||||
checked: 'true'
|
||||
}
|
||||
],
|
||||
hidden: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkboxChange: function(e) {
|
||||
var checked = e.detail.value
|
||||
console.log(checked)
|
||||
|
||||
},
|
||||
radioChange: function(e) {
|
||||
var checked = e.detail.value
|
||||
console.log(checked)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-list-cell {
|
||||
justify-content: flex-start
|
||||
}
|
||||
|
||||
.uni-list .label-3 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.label-2-text {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
295
pages/component/map/map.nvue
Normal file
295
pages/component/map/map.nvue
Normal file
@@ -0,0 +1,295 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<map class="map" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude" :latitude="location.latitude"
|
||||
:show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew" :show-compass="showCompass"
|
||||
:enable-overlooking="enableOverlooking" :enable-zoom="enableZoom" :enable-scroll="enableScroll"
|
||||
:enable-rotate="enableRotate" :enable-satellite="enableSatellite" :enable-traffic="enableTraffic" :markers="markers"
|
||||
:polyline="polyline" :circles="circles" :polygons="polygons" :include-points="includePoints"></map>
|
||||
<view class="line"></view>
|
||||
<uni-list class="scrollview">
|
||||
<uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enable3D" title="显示3D楼块" @switchChange="enableThreeD" />
|
||||
<uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="showCompass" title="显示指南针" @switchChange="changeShowCompass" />
|
||||
<!-- <uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableOverlooking" title="开启俯视" @switchChange="changeEnableOverlooking" /> -->
|
||||
<uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableZoom" title="是否支持缩放" @switchChange="changeEnableZoom" />
|
||||
<uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableScroll" title="是否支持拖动" @switchChange="changeEnableScroll" />
|
||||
<uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableRotate" title="是否支持旋转" @switchChange="changeEnableRotate" />
|
||||
<uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableSatellite" title="是否开启卫星图" @switchChange="changeEnableSatellite" />
|
||||
<uni-list-item :show-arrow="false" :show-switch="true" :switch-checked="enableTraffic" title="是否开启实时路况" @switchChange="changeEnableTraffic" />
|
||||
</uni-list>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
const testMarkers = [{
|
||||
id: 0,
|
||||
latitude: 39.989631,
|
||||
longitude: 116.481018,
|
||||
title: '方恒国际 阜通东大街6号',
|
||||
zIndex: '1',
|
||||
rotate: 0,
|
||||
width: 20,
|
||||
height: 20,
|
||||
anchor: {
|
||||
x: 0.5,
|
||||
y: 1
|
||||
},
|
||||
callout: {
|
||||
content: '方恒国际 阜通东大街6号',
|
||||
color: '#00BFFF',
|
||||
fontSize: 10,
|
||||
borderRadius: 4,
|
||||
borderWidth: 1,
|
||||
borderColor: '#333300',
|
||||
bgColor: '#CCFF99',
|
||||
padding: '5',
|
||||
display: 'ALWAYS'
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
latitude: 39.9086920000,
|
||||
longitude: 116.3974770000,
|
||||
title: '天安门',
|
||||
zIndex: '1',
|
||||
iconPath: '/static/location.png',
|
||||
width: 40,
|
||||
height: 40,
|
||||
anchor: {
|
||||
x: 0.5,
|
||||
y: 1
|
||||
},
|
||||
callout: {
|
||||
content: '首都北京\n天安门',
|
||||
color: '#00BFFF',
|
||||
fontSize: 12,
|
||||
borderRadius: 2,
|
||||
borderWidth: 0,
|
||||
borderColor: '#333300',
|
||||
bgColor: '#CCFF11',
|
||||
padding: '1',
|
||||
display: 'ALWAYS'
|
||||
}
|
||||
}
|
||||
];
|
||||
const testPolyline = [{
|
||||
points: [{
|
||||
latitude: 39.925539,
|
||||
longitude: 116.279037
|
||||
},
|
||||
{
|
||||
latitude: 39.925539,
|
||||
longitude: 116.520285
|
||||
}
|
||||
],
|
||||
color: '#FFCCFF',
|
||||
width: 7,
|
||||
dottedLine: true,
|
||||
arrowLine: true,
|
||||
borderColor: '#000000',
|
||||
borderWidth: 2
|
||||
},
|
||||
{
|
||||
points: [{
|
||||
latitude: 39.938698,
|
||||
longitude: 116.275177
|
||||
},
|
||||
{
|
||||
latitude: 39.966069,
|
||||
longitude: 116.289253
|
||||
},
|
||||
{
|
||||
latitude: 39.944226,
|
||||
longitude: 116.306076
|
||||
},
|
||||
{
|
||||
latitude: 39.966069,
|
||||
longitude: 116.322899
|
||||
},
|
||||
{
|
||||
latitude: 39.938698,
|
||||
longitude: 116.336975
|
||||
}
|
||||
],
|
||||
color: '#CCFFFF',
|
||||
width: 5,
|
||||
dottedLine: true,
|
||||
arrowLine: true,
|
||||
borderColor: '#CC0000',
|
||||
borderWidth: 3
|
||||
}
|
||||
];
|
||||
const testPolygons = [{
|
||||
points: [{
|
||||
latitude: 39.781892,
|
||||
longitude: 116.293413
|
||||
},
|
||||
{
|
||||
latitude: 39.787600,
|
||||
longitude: 116.391842
|
||||
},
|
||||
{
|
||||
latitude: 39.733187,
|
||||
longitude: 116.417932
|
||||
},
|
||||
{
|
||||
latitude: 39.704653,
|
||||
longitude: 116.338255
|
||||
}
|
||||
],
|
||||
fillColor: '#FFCCFF',
|
||||
strokeWidth: 3,
|
||||
strokeColor: '#CC99CC',
|
||||
zIndex: 11
|
||||
},
|
||||
{
|
||||
points: [{
|
||||
latitude: 39.887600,
|
||||
longitude: 116.518932
|
||||
},
|
||||
{
|
||||
latitude: 39.781892,
|
||||
longitude: 116.518932
|
||||
},
|
||||
{
|
||||
latitude: 39.781892,
|
||||
longitude: 116.428932
|
||||
},
|
||||
{
|
||||
latitude: 39.887600,
|
||||
longitude: 116.428932
|
||||
}
|
||||
],
|
||||
fillColor: '#CCFFFF',
|
||||
strokeWidth: 5,
|
||||
strokeColor: '#CC0000',
|
||||
zIndex: 3
|
||||
}
|
||||
];
|
||||
const testCircles = [{
|
||||
latitude: 39.996441,
|
||||
longitude: 116.411146,
|
||||
radius: 15000,
|
||||
strokeWidth: 5,
|
||||
color: '#CCFFFF',
|
||||
fillColor: '#CC0000'
|
||||
},
|
||||
{
|
||||
latitude: 40.096441,
|
||||
longitude: 116.511146,
|
||||
radius: 12000,
|
||||
strokeWidth: 3,
|
||||
color: '#CCFFFF',
|
||||
fillColor: '#FFCCFF'
|
||||
},
|
||||
{
|
||||
latitude: 39.896441,
|
||||
longitude: 116.311146,
|
||||
radius: 9000,
|
||||
strokeWidth: 1,
|
||||
color: '#CCFFFF',
|
||||
fillColor: '#CC0000'
|
||||
}
|
||||
];
|
||||
const testIncludePoints = [{
|
||||
latitude: 39.989631,
|
||||
longitude: 116.481018,
|
||||
},
|
||||
{
|
||||
latitude: 39.9086920000,
|
||||
longitude: 116.3974770000,
|
||||
}
|
||||
];
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
location: {
|
||||
longitude: 116.3974770000,
|
||||
latitude: 39.9086920000
|
||||
},
|
||||
controls: [{
|
||||
id: 1,
|
||||
position: {
|
||||
left: 5,
|
||||
top: 180,
|
||||
width: 30,
|
||||
height: 30
|
||||
},
|
||||
iconPath: '/static/logo.png',
|
||||
clickable: true
|
||||
}],
|
||||
showLocation: false,
|
||||
scale: 13,
|
||||
showCompass: true,
|
||||
enable3D: true,
|
||||
enableOverlooking: true,
|
||||
enableZoom: true,
|
||||
enableScroll: true,
|
||||
enableRotate: true,
|
||||
enableSatellite: false,
|
||||
enableTraffic: false,
|
||||
polyline: [],
|
||||
markers: [],
|
||||
polygons: [],
|
||||
circles: [],
|
||||
includePoints: [],
|
||||
rotate: 0,
|
||||
skew: 0
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
changeScale() {
|
||||
this.scale = this.scale == 9 ? 15 : 9;
|
||||
},
|
||||
changeRotate() {
|
||||
this.rotate = this.rotate == 90 ? 0 : 90;
|
||||
},
|
||||
changeSkew() {
|
||||
this.skew = this.skew == 30 ? 0 : 30;
|
||||
},
|
||||
enableThreeD(e) {
|
||||
this.enable3D = e.value;
|
||||
},
|
||||
changeShowCompass(e) {
|
||||
this.showCompass = e.value;
|
||||
},
|
||||
changeEnableOverlooking(e) {
|
||||
this.enableOverlooking = e.value;
|
||||
},
|
||||
changeEnableZoom(e) {
|
||||
this.enableZoom = e.value;
|
||||
},
|
||||
changeEnableScroll(e) {
|
||||
this.enableScroll = e.value;
|
||||
},
|
||||
changeEnableRotate(e) {
|
||||
this.enableRotate = e.value;
|
||||
},
|
||||
changeEnableSatellite(e) {
|
||||
this.enableSatellite = e.value;
|
||||
},
|
||||
changeEnableTraffic(e) {
|
||||
this.enableTraffic = e.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.map {
|
||||
width: 750rpx;
|
||||
height: 250px;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.scrollview {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
52
pages/component/map/map.vue
Normal file
52
pages/component/map/map.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-common-mt">
|
||||
<view>
|
||||
<map :latitude="latitude" :longitude="longitude" :markers="covers">
|
||||
</map>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'map',
|
||||
latitude: 39.909,
|
||||
longitude: 116.39742,
|
||||
covers: [{
|
||||
id: 1,
|
||||
latitude: 39.9085,
|
||||
longitude: 116.39747,
|
||||
// #ifdef APP-PLUS
|
||||
iconPath: '../../../static/app-plus/location@3x.png',
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
iconPath: '../../../static/location.png',
|
||||
// #endif
|
||||
}, {
|
||||
id: 2,
|
||||
latitude: 39.90,
|
||||
longitude: 116.39,
|
||||
// #ifdef APP-PLUS
|
||||
iconPath: '../../../static/app-plus/location@3x.png',
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
iconPath: '../../../static/location.png',
|
||||
// #endif
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
map {
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
}
|
||||
</style>
|
||||
129
pages/component/movable-view/movable-view.vue
Normal file
129
pages/component/movable-view/movable-view.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<view class="page-body">
|
||||
<page-head title="movable-view,可拖动视图"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 1
|
||||
<text>\nmovable-view 区域小于 movable-area</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
|
||||
</movable-area>
|
||||
<view @tap="tap" class="uni-link uni-center uni-common-mt">
|
||||
点击这里移动至 (30px, 30px)
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 2
|
||||
<text>\nmovable-view区域大于movable-area</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view class="max" direction="all">text</movable-view>
|
||||
</movable-area>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 3
|
||||
<text>\n只可以横向移动</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view direction="horizontal">text</movable-view>
|
||||
</movable-area>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 4
|
||||
<text>\n只可以纵向移动</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view direction="vertical">text</movable-view>
|
||||
</movable-area>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 5
|
||||
<text>\n可超出边界</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view direction="all" out-of-bounds>text</movable-view>
|
||||
</movable-area>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 6
|
||||
<text>\n带有惯性</text>
|
||||
</view>
|
||||
<movable-area>
|
||||
<movable-view direction="all" inertia>text</movable-view>
|
||||
</movable-area>
|
||||
<view class="uni-title uni-common-mt">
|
||||
示例 7
|
||||
<text>\n可放缩</text>
|
||||
</view>
|
||||
<movable-area scale-area>
|
||||
<movable-view direction="all" @scale="onScale" scale scale-min="0.5" scale-max="4" :scale-value="scale">text</movable-view>
|
||||
</movable-area>
|
||||
<view @tap="tap2" class="uni-link uni-center uni-common-mt" style="padding-bottom:80rpx;">
|
||||
点击这里放大3倍
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
x: 0,
|
||||
y: 0,
|
||||
scale: 2,
|
||||
old: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
scale: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tap: function(e) {
|
||||
// 解决view层不同步的问题
|
||||
this.x = this.old.x
|
||||
this.y = this.old.y
|
||||
this.$nextTick(function() {
|
||||
this.x = 30
|
||||
this.y = 30
|
||||
})
|
||||
},
|
||||
tap2() {
|
||||
// 解决view层不同步的问题
|
||||
this.scale = this.old.scale
|
||||
this.scale = this.old.scale
|
||||
this.$nextTick(function() {
|
||||
this.scale = 3
|
||||
})
|
||||
},
|
||||
onChange: function(e) {
|
||||
this.old.x = e.detail.x
|
||||
this.old.y = e.detail.y
|
||||
},
|
||||
onScale: function(e) {
|
||||
this.old.scale = e.detail.scale
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
movable-view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 150rpx;
|
||||
width: 150rpx;
|
||||
background-color: #007AFF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
movable-area {
|
||||
height: 300rpx;
|
||||
width: 100%;
|
||||
background-color: #D8D8D8;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.max {
|
||||
width:500rpx;
|
||||
height: 500rpx;
|
||||
}
|
||||
</style>
|
||||
14
pages/component/navigator/navigate/navigate.vue
Normal file
14
pages/component/navigator/navigate/navigate.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '新建的页面'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
33
pages/component/navigator/navigator.vue
Normal file
33
pages/component/navigator/navigator.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-btn-v">
|
||||
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
|
||||
<button type="default">跳转到新页面</button>
|
||||
</navigator>
|
||||
<navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
|
||||
<button type="default">在当前页打开</button>
|
||||
</navigator>
|
||||
<navigator v-if="!hasLeftWin" url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
|
||||
<button type="default">跳转tab页面</button>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'navigator'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
hasLeftWin: state => !state.noMatchLeftWindow
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
14
pages/component/navigator/redirect/redirect.vue
Normal file
14
pages/component/navigator/redirect/redirect.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '当前页'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
91
pages/component/picker-view/picker-view.vue
Normal file
91
pages/component/picker-view/picker-view.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title">
|
||||
日期：{{year}}年{{month}}月{{day}}日
|
||||
</view>
|
||||
</view>
|
||||
<picker-view v-if="visible" :indicator-style="indicatorStyle" :mask-style="maskStyle" :value="value" @change="bindChange">
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
const date = new Date()
|
||||
const years = []
|
||||
const year = date.getFullYear()
|
||||
const months = []
|
||||
const month = date.getMonth() + 1
|
||||
const days = []
|
||||
const day = date.getDate()
|
||||
|
||||
for (let i = 1990; i <= date.getFullYear(); i++) {
|
||||
years.push(i)
|
||||
}
|
||||
|
||||
for (let i = 1; i <= 12; i++) {
|
||||
months.push(i)
|
||||
}
|
||||
|
||||
for (let i = 1; i <= 31; i++) {
|
||||
days.push(i)
|
||||
}
|
||||
return {
|
||||
title: 'picker-view',
|
||||
years,
|
||||
year,
|
||||
months,
|
||||
month,
|
||||
days,
|
||||
day,
|
||||
value: [9999, month - 1, day - 1],
|
||||
/**
|
||||
* 解决动态设置indicator-style不生效的问题
|
||||
*/
|
||||
visible: true,
|
||||
// indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
|
||||
indicatorStyle: `height: 50px;`,
|
||||
// #ifdef MP-KUAISHOU
|
||||
maskStyle: "padding:10px 0"
|
||||
// #endif
|
||||
// #ifndef MP-KUAISHOU
|
||||
maskStyle: ""
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bindChange (e) {
|
||||
const val = e.detail.value
|
||||
this.year = this.years[val[0]]
|
||||
this.month = this.months[val[1]]
|
||||
this.day = this.days[val[2]]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
picker-view {
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
margin-top:20rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
178
pages/component/picker/picker.vue
Normal file
178
pages/component/picker/picker.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-title uni-common-pl">普通选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
|
||||
<view class="uni-input">{{array[index].name}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<view class="uni-title uni-common-pl">多列选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
|
||||
<view class="uni-input">{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="uni-title uni-common-pl">时间选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
|
||||
<view class="uni-input">{{time}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-picker-tips">
|
||||
注：选择 09:01 ~ 21:01 之间的时间, 不在区间内不能选中
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-pl">日期选择器</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell">
|
||||
<view class="uni-list-cell-left">
|
||||
当前选择
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
|
||||
<view class="uni-input">{{date}}</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-picker-tips">
|
||||
注：选择当前时间 ±10 年之间的时间, 不在区间内不能选中
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
function getDate(type) {
|
||||
const date = new Date();
|
||||
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
|
||||
if (type === 'start') {
|
||||
year = year - 10;
|
||||
} else if (type === 'end') {
|
||||
year = year + 10;
|
||||
}
|
||||
month = month > 9 ? month : '0' + month;;
|
||||
day = day > 9 ? day : '0' + day;
|
||||
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'picker',
|
||||
array: [{name:'中国'},{name: '美国'}, {name:'巴西'}, {name:'日本'}],
|
||||
index: 0,
|
||||
multiArray: [
|
||||
['亚洲', '欧洲'],
|
||||
['中国', '日本'],
|
||||
['北京', '上海', '广州']
|
||||
],
|
||||
multiIndex: [0, 0, 0],
|
||||
date: getDate({
|
||||
format: true
|
||||
}),
|
||||
startDate:getDate('start'),
|
||||
endDate:getDate('end'),
|
||||
time: '12:01'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bindPickerChange: function(e) {
|
||||
console.log('picker发送选择改变，携带值为：' + e.detail.value)
|
||||
this.index = e.detail.value
|
||||
},
|
||||
bindMultiPickerColumnChange: function(e) {
|
||||
console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
|
||||
this.multiIndex[e.detail.column] = e.detail.value
|
||||
switch (e.detail.column) {
|
||||
case 0: //拖动第1列
|
||||
switch (this.multiIndex[0]) {
|
||||
case 0:
|
||||
this.multiArray[1] = ['中国', '日本']
|
||||
this.multiArray[2] = ['北京', '上海', '广州']
|
||||
break
|
||||
case 1:
|
||||
this.multiArray[1] = ['英国', '法国']
|
||||
this.multiArray[2] = ['伦敦', '曼彻斯特']
|
||||
break
|
||||
}
|
||||
this.multiIndex.splice(1, 1, 0)
|
||||
this.multiIndex.splice(2, 1, 0)
|
||||
break
|
||||
case 1: //拖动第2列
|
||||
switch (this.multiIndex[0]) { //判断第一列是什么
|
||||
case 0:
|
||||
switch (this.multiIndex[1]) {
|
||||
case 0:
|
||||
this.multiArray[2] = ['北京', '上海', '广州']
|
||||
break
|
||||
case 1:
|
||||
this.multiArray[2] = ['东京','北海道']
|
||||
break
|
||||
}
|
||||
break
|
||||
case 1:
|
||||
switch (this.multiIndex[1]) {
|
||||
case 0:
|
||||
this.multiArray[2] = ['伦敦', '曼彻斯特']
|
||||
break
|
||||
case 1:
|
||||
this.multiArray[2] = ['巴黎', '马赛']
|
||||
break
|
||||
}
|
||||
break
|
||||
}
|
||||
this.multiIndex.splice(2, 1, 0)
|
||||
break
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
bindDateChange: function(e) {
|
||||
this.date = e.detail.value
|
||||
},
|
||||
bindTimeChange: function(e) {
|
||||
this.time = e.detail.value
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-picker-tips {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 15px;
|
||||
padding: 0 15px;
|
||||
/* text-align: right; */
|
||||
}
|
||||
</style>
|
||||
62
pages/component/progress/progress.vue
Normal file
62
pages/component/progress/progress.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[0]" show-info stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[1]" stroke-width="3" />
|
||||
<uni-icons type="close" class="progress-cancel" color="#dd524d"></uni-icons>
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[2]" stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="pgList[3]" activeColor="#10AEFF" stroke-width="3" />
|
||||
</view>
|
||||
<view class="progress-control">
|
||||
<button type="primary" @click="setProgress">设置进度</button>
|
||||
<button type="warn" @click="clearProgress">清除进度</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'progress',
|
||||
pgList: [0, 0, 0, 0]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setProgress() {
|
||||
this.pgList = [20, 40, 60, 80]
|
||||
},
|
||||
clearProgress() {
|
||||
this.pgList = [0, 0, 0, 0]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.progress-box {
|
||||
display: flex;
|
||||
height: 50rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.uni-icon {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.progress-cancel {
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
|
||||
.progress-control button{
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
</style>
|
||||
90
pages/component/radio/radio.vue
Normal file
90
pages/component/radio/radio.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title">默认样式</view>
|
||||
<view>
|
||||
<label class="radio" style="margin-right: 30rpx;">
|
||||
<radio value="r1" checked="true" />选中
|
||||
</label>
|
||||
<label class="radio">
|
||||
<radio value="r2" />未选中
|
||||
</label>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title">不同颜色和尺寸的radio</view>
|
||||
<view>
|
||||
<label class="radio" style="margin-right: 30rpx;">
|
||||
<radio value="r1" checked="true" color="#FFCC33" style="transform:scale(0.7)"/>选中
|
||||
</label>
|
||||
<label class="radio">
|
||||
<radio value="r2" color="#FFCC33" style="transform:scale(0.7)"/>未选中
|
||||
</label>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-title uni-common-mt uni-common-pl">推荐展示样式</view>
|
||||
<view class="uni-list">
|
||||
<radio-group @change="radioChange">
|
||||
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
|
||||
<view>
|
||||
<radio :value="item.value" :checked="index === current" />
|
||||
</view>
|
||||
<view>{{item.name}}</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'radio 单选框',
|
||||
items: [{
|
||||
value: 'USA',
|
||||
name: '美国'
|
||||
},
|
||||
{
|
||||
value: 'CHN',
|
||||
name: '中国',
|
||||
checked: 'true'
|
||||
},
|
||||
{
|
||||
value: 'BRA',
|
||||
name: '巴西'
|
||||
},
|
||||
{
|
||||
value: 'JPN',
|
||||
name: '日本'
|
||||
},
|
||||
{
|
||||
value: 'ENG',
|
||||
name: '英国'
|
||||
},
|
||||
{
|
||||
value: 'FRA',
|
||||
name: '法国'
|
||||
},
|
||||
],
|
||||
current: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
radioChange(evt) {
|
||||
for (let i = 0; i < this.items.length; i++) {
|
||||
if (this.items[i].value === evt.detail.value) {
|
||||
this.current = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-list-cell {
|
||||
justify-content: flex-start
|
||||
}
|
||||
</style>
|
||||
44
pages/component/rich-text/rich-text.vue
Normal file
44
pages/component/rich-text/rich-text.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title uni-common-mt">
|
||||
数组类型
|
||||
<text>\nnodes属性为Array</text>
|
||||
</view>
|
||||
<view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
|
||||
<rich-text :nodes="nodes"></rich-text>
|
||||
</view>
|
||||
<!-- #ifndef MP-ALIPAY -->
|
||||
<view class="uni-title uni-common-mt">
|
||||
字符串类型
|
||||
<text>\nnodes属性为String</text>
|
||||
</view>
|
||||
<view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
|
||||
<rich-text :nodes="strings"></rich-text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'rich-text',
|
||||
nodes: [{
|
||||
name: 'div',
|
||||
attrs: {
|
||||
class: 'div-class',
|
||||
style: 'line-height: 60px; color: red; text-align:center;'
|
||||
},
|
||||
children: [{
|
||||
type: 'text',
|
||||
text: 'Hello uni-app!'
|
||||
}]
|
||||
}],
|
||||
strings: '<div style="text-align:center;"><img src="https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"/></div>'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
97
pages/component/scroll-view/scroll-view.vue
Normal file
97
pages/component/scroll-view/scroll-view.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head title="scroll-view,区域滚动视图"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title uni-common-mt">
|
||||
Vertical Scroll
|
||||
<text>\n纵向滚动</text>
|
||||
</view>
|
||||
<view>
|
||||
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
|
||||
@scroll="scroll">
|
||||
<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
|
||||
<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
|
||||
<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view @tap="goTop" class="uni-link uni-center uni-common-mt">
|
||||
点击这里返回顶部
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-mt">
|
||||
Horizontal Scroll
|
||||
<text>\n横向滚动</text>
|
||||
</view>
|
||||
<view>
|
||||
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
|
||||
<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
|
||||
<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
|
||||
<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="uni-common-pb"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
old: {
|
||||
scrollTop: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upper: function(e) {
|
||||
console.log(e)
|
||||
},
|
||||
lower: function(e) {
|
||||
console.log(e)
|
||||
},
|
||||
scroll: function(e) {
|
||||
console.log(e)
|
||||
this.old.scrollTop = e.detail.scrollTop
|
||||
},
|
||||
goTop: function(e) {
|
||||
// 解决view层不同步的问题
|
||||
this.scrollTop = this.old.scrollTop
|
||||
this.$nextTick(function() {
|
||||
this.scrollTop = 0
|
||||
});
|
||||
uni.showToast({
|
||||
icon:"none",
|
||||
title:"纵向滚动 scrollTop 值已被修改为 0"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.scroll-Y {
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.scroll-view_H {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.scroll-view-item {
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.scroll-view-item_H {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
</style>
|
||||
40
pages/component/slider/slider.vue
Normal file
40
pages/component/slider/slider.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title">显示当前value</view>
|
||||
<view>
|
||||
<slider value="50" @change="sliderChange" show-value />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">设置步进step跳动</view>
|
||||
<view>
|
||||
<slider value="60" @change="sliderChange" step="5" />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">设置最小/最大值</view>
|
||||
<view>
|
||||
<slider value="100" @change="sliderChange" min="50" max="200" show-value />
|
||||
</view>
|
||||
|
||||
<view class="uni-title">不同颜色和大小的滑块</view>
|
||||
<view>
|
||||
<slider value="50" @change="sliderChange" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'slider 滑块'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sliderChange(e) {
|
||||
console.log('value 发生变化：' + e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
105
pages/component/swiper/swiper.vue
Normal file
105
pages/component/swiper/swiper.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head title="swiper,可滑动视图"></page-head>
|
||||
<view class="uni-margin-wrap">
|
||||
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-red">A</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-green">B</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="swiper-item uni-bg-blue">C</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
<view class="swiper-list">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">指示点</view>
|
||||
<switch :checked="indicatorDots" @change="changeIndicatorDots" />
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">自动播放</view>
|
||||
<switch :checked="autoplay" @change="changeAutoplay" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-common-mt">
|
||||
<text>幻灯片切换时长(ms)</text>
|
||||
<text class="info">{{duration}}</text>
|
||||
</view>
|
||||
<slider @change="durationChange" :value="duration" min="500" max="2000" />
|
||||
<view class="uni-common-mt">
|
||||
<text>自动播放间隔时长(ms)</text>
|
||||
<text class="info">{{interval}}</text>
|
||||
</view>
|
||||
<slider @change="intervalChange" :value="interval" min="2000" max="10000" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
background: ['color1', 'color2', 'color3'],
|
||||
indicatorDots: true,
|
||||
autoplay: true,
|
||||
interval: 2000,
|
||||
duration: 500
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeIndicatorDots(e) {
|
||||
this.indicatorDots = !this.indicatorDots
|
||||
},
|
||||
changeAutoplay(e) {
|
||||
this.autoplay = !this.autoplay
|
||||
},
|
||||
intervalChange(e) {
|
||||
this.interval = e.detail.value
|
||||
},
|
||||
durationChange(e) {
|
||||
this.duration = e.detail.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-margin-wrap {
|
||||
width:690rpx;
|
||||
width: 100%;;
|
||||
}
|
||||
.swiper {
|
||||
height: 300rpx;
|
||||
}
|
||||
.swiper-item {
|
||||
display: block;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.swiper-list {
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.uni-common-mt{
|
||||
margin-top:60rpx;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.info {
|
||||
position: absolute;
|
||||
right:20rpx;
|
||||
}
|
||||
|
||||
.uni-padding-wrap {
|
||||
width:550rpx;
|
||||
padding:0 100rpx;
|
||||
}
|
||||
</style>
|
||||
47
pages/component/switch/switch.vue
Normal file
47
pages/component/switch/switch.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title">默认样式</view>
|
||||
<view>
|
||||
<switch checked @change="switch1Change" />
|
||||
<switch @change="switch2Change" />
|
||||
</view>
|
||||
<view class="uni-title">不同颜色和尺寸的switch</view>
|
||||
<view>
|
||||
<switch checked color="#FFCC33" style="transform:scale(0.7)"/>
|
||||
<switch color="#FFCC33" style="transform:scale(0.7)"/>
|
||||
</view>
|
||||
|
||||
<view class="uni-title">推荐展示样式</view>
|
||||
</view>
|
||||
<view class="uni-list">
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">开启中</view>
|
||||
<switch checked />
|
||||
</view>
|
||||
<view class="uni-list-cell uni-list-cell-pd">
|
||||
<view class="uni-list-cell-db">关闭</view>
|
||||
<switch />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'switch 开关'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switch1Change: function (e) {
|
||||
console.log('switch1 发生 change 事件，携带值为', e.detail.value)
|
||||
},
|
||||
switch2Change: function (e) {
|
||||
console.log('switch2 发生 change 事件，携带值为', e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
74
pages/component/text/text.vue
Normal file
74
pages/component/text/text.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="text-box" scroll-y="true">
|
||||
<text>{{text}}</text>
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button type="primary" :disabled="!canAdd" @click="add">add line</button>
|
||||
<button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'text',
|
||||
texts: [
|
||||
'HBuilder，400万开发者选择的IDE',
|
||||
'MUI，轻巧、漂亮的前端开源框架',
|
||||
'wap2app，M站快速转换原生体验的App',
|
||||
'5+Runtime，为HTML5插上原生的翅膀',
|
||||
'HBuilderX，轻巧、极速，极客编辑器',
|
||||
'uni-app，终极跨平台方案',
|
||||
'HBuilder，400万开发者选择的IDE',
|
||||
'MUI，轻巧、漂亮的前端开源框架',
|
||||
'wap2app，M站快速转换原生体验的App',
|
||||
'5+Runtime，为HTML5插上原生的翅膀',
|
||||
'HBuilderX，轻巧、极速，极客编辑器',
|
||||
'uni-app，终极跨平台方案',
|
||||
'......'
|
||||
],
|
||||
text: '',
|
||||
canAdd: true,
|
||||
canRemove: false,
|
||||
extraLine: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add: function(e) {
|
||||
this.extraLine.push(this.texts[this.extraLine.length % 12]);
|
||||
this.text = this.extraLine.join('\n');
|
||||
this.canAdd = this.extraLine.length < 12;
|
||||
this.canRemove = this.extraLine.length > 0;
|
||||
},
|
||||
remove: function(e) {
|
||||
if (this.extraLine.length > 0) {
|
||||
this.extraLine.pop();
|
||||
this.text = this.extraLine.join('\n');
|
||||
this.canAdd = this.extraLine.length < 12;
|
||||
this.canRemove = this.extraLine.length > 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.text-box {
|
||||
margin-bottom: 40rpx;
|
||||
padding: 40rpx 0;
|
||||
display: flex;
|
||||
min-height: 300rpx;
|
||||
background-color: #FFFFFF;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
color: #353535;
|
||||
line-height: 1.8;
|
||||
}
|
||||
</style>
|
||||
34
pages/component/textarea/textarea.vue
Normal file
34
pages/component/textarea/textarea.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
|
||||
|
||||
|
||||
<view class="uni-title uni-common-pl">输入区域高度自适应，不会出现滚动条</view>
|
||||
<view class="uni-textarea">
|
||||
<textarea @blur="bindTextAreaBlur" auto-height />
|
||||
</view>
|
||||
<view class="uni-title uni-common-pl">占位符字体是红色的textarea</view>
|
||||
<view class="uni-textarea">
|
||||
<textarea placeholder-style="color:#F76260" placeholder="占位符字体是红色的"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'textarea',
|
||||
focus: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
bindTextAreaBlur: function (e) {
|
||||
console.log(e.detail.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
104
pages/component/video/video.nvue
Normal file
104
pages/component/video/video.nvue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div>
|
||||
<video id='video1' class="video" :src="src" autoplay="false" duration="" controls="true" :danmu-list="list"
|
||||
danmu-btn="true" enable-danmu="true" :loop="true" muted="true" initial-time="" direction="-90"
|
||||
show-mute-btn="true" @play="onstart" @pause="onpause" @ended="onfinish" @error="onfail" @waiting="waiting"
|
||||
@timeupdate="timeupdate" @fullscreenchange="fullscreenchange"></video>
|
||||
<button class="btn" @click="play">播放</button>
|
||||
<button class="btn" @click="pause">暂停</button>
|
||||
<button class="btn" @click="seek">跳转到指定位置</button>
|
||||
<button class="btn" @click="stop">停止</button>
|
||||
<button class="btn" @click="fullScreen">全屏</button>
|
||||
<button class="btn" @click="exitFullScreen">退出全屏</button>
|
||||
<button class="btn" @click="playbackRate">设置倍速</button>
|
||||
<button class="btn" @click="sendDanmu">发送弹幕</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4",
|
||||
fil: true,
|
||||
list: [{
|
||||
text: '要显示的文本',
|
||||
color: '#FF0000',
|
||||
time: 9
|
||||
}]
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.context = uni.createVideoContext("video1", this);
|
||||
},
|
||||
methods: {
|
||||
onstart(e) {
|
||||
console.log("onstart:" + JSON.stringify(e));
|
||||
},
|
||||
onpause(e) {
|
||||
console.log("onpause:" + JSON.stringify(e));
|
||||
},
|
||||
onfinish(e) {
|
||||
console.log("onfinish:" + JSON.stringify(e));
|
||||
},
|
||||
onfail(e) {
|
||||
console.log("onfail:" + JSON.stringify(e));
|
||||
},
|
||||
fullscreenchange(e) {
|
||||
console.log("fullscreenchange:" + JSON.stringify(e));
|
||||
},
|
||||
waiting(e) {
|
||||
console.log("waiting:" + JSON.stringify(e));
|
||||
},
|
||||
timeupdate(e) {
|
||||
console.log("timeupdate:" + JSON.stringify(e));
|
||||
},
|
||||
|
||||
play() {
|
||||
this.context.play();
|
||||
},
|
||||
pause() {
|
||||
this.context.pause();
|
||||
},
|
||||
seek() {
|
||||
this.context.seek(20);
|
||||
},
|
||||
stop() {
|
||||
this.context.stop();
|
||||
},
|
||||
fullScreen() {
|
||||
this.context.requestFullScreen({
|
||||
direction: 90
|
||||
});
|
||||
},
|
||||
exitFullScreen() {
|
||||
this.context.exitFullScreen();
|
||||
},
|
||||
sendDanmu() {
|
||||
this.context.sendDanmu({
|
||||
text: '要显示的弹幕文本',
|
||||
color: '#FF0000'
|
||||
});
|
||||
},
|
||||
playbackRate() {
|
||||
this.context.playbackRate(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.video {
|
||||
width: 750rpx;
|
||||
/* #ifdef H5 */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
height: 400rpx;
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
94
pages/component/video/video.vue
Normal file
94
pages/component/video/video.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head :title="title"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt" v-if="showVideo">
|
||||
<view>
|
||||
<video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
|
||||
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls poster="https://web-assets.dcloud.net.cn/unidoc/zh/poster.png"></video>
|
||||
</view>
|
||||
<!-- #ifndef MP-ALIPAY || MP-TOUTIAO || MP-KUAISHOU || MP-LARK || MP-JD -->
|
||||
<view class="uni-list uni-common-mt">
|
||||
<view class="uni-list-cell">
|
||||
<view>
|
||||
<view class="uni-label">弹幕内容</view>
|
||||
</view>
|
||||
<view class="uni-list-cell-db">
|
||||
<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-btn-v">
|
||||
<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'video',
|
||||
src: '',
|
||||
danmuList: [{
|
||||
text: '第 1s 出现的弹幕',
|
||||
color: '#ff0000',
|
||||
time: 1
|
||||
},
|
||||
{
|
||||
text: '第 3s 出现的弹幕',
|
||||
color: '#ff00ff',
|
||||
time: 3
|
||||
}
|
||||
],
|
||||
danmuValue: '',
|
||||
showVideo: false
|
||||
}
|
||||
},
|
||||
onReady: function(res) {
|
||||
// #ifndef MP-ALIPAY || MP-TOUTIAO
|
||||
this.videoContext = uni.createVideoContext('myVideo')
|
||||
// #endif
|
||||
// #ifdef APP-PLUS || MP-BAIDU
|
||||
setTimeout(()=>{
|
||||
this.showVideo = true
|
||||
},350)
|
||||
// #endif
|
||||
// #ifndef APP-PLUS || MP-BAIDU
|
||||
this.showVideo = true
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
sendDanmu: function() {
|
||||
this.videoContext.sendDanmu({
|
||||
text: this.danmuValue,
|
||||
color: this.getRandomColor()
|
||||
});
|
||||
this.danmuValue = '';
|
||||
},
|
||||
videoErrorCallback: function(e) {
|
||||
uni.showModal({
|
||||
content: e.target.errMsg,
|
||||
showCancel: false
|
||||
})
|
||||
},
|
||||
getRandomColor: function() {
|
||||
const rgb = []
|
||||
for (let i = 0; i < 3; ++i) {
|
||||
let color = Math.floor(Math.random() * 256).toString(16)
|
||||
color = color.length == 1 ? '0' + color : color
|
||||
rgb.push(color)
|
||||
}
|
||||
return '#' + rgb.join('')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
video {
|
||||
width: 690rpx;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
36
pages/component/view/view.test.js
Normal file
36
pages/component/view/view.test.js
Normal file
@@ -0,0 +1,36 @@
|
||||
describe('pages/component/view/view.vue', () => {
|
||||
let page
|
||||
beforeAll(async () => {
|
||||
// 重新reLaunch至首页，并获取首页page对象（其中 program 是uni-automator自动注入的全局对象）
|
||||
page = await program.reLaunch('/pages/component/view/view')
|
||||
await page.waitFor(1000)
|
||||
})
|
||||
|
||||
/**
|
||||
* 测试步骤
|
||||
* 1. 检测页面标题是否为 view
|
||||
*/
|
||||
it('view 组件标题', async () => {
|
||||
let view = await page.$('.common-page-head-title')
|
||||
expect(await view.text()).toBe('view')
|
||||
})
|
||||
/**
|
||||
* 测试步骤
|
||||
* 1. uni-flex 的个数
|
||||
* 2. flex-item 的个数
|
||||
*/
|
||||
it('view 个数', async () => {
|
||||
let viewLen = await page.$$('.uni-flex')
|
||||
expect(viewLen.length).toBe(18)
|
||||
let viewItemLen = await page.$$('.flex-item')
|
||||
expect(viewItemLen.length).toBe(6)
|
||||
})
|
||||
/**
|
||||
* 测试步骤
|
||||
* 1. 第一个颜色块的色值是否为 rgb(247, 98, 96)
|
||||
*/
|
||||
it('view 前三个元素颜色', async () => {
|
||||
let viewRed = await page.$('.uni-bg-red')
|
||||
expect(await viewRed.style('backgroundColor')).toBe('rgb(247, 98, 96)')
|
||||
})
|
||||
})
|
||||
146
pages/component/view/view.vue
Normal file
146
pages/component/view/view.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<view>
|
||||
<page-head title="view"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-hello-text">
|
||||
Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display: flex后，继续给view等容器组件设置flex-direction:
|
||||
row或column，就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-mt">
|
||||
flex-direction: row
|
||||
<text>\n横向布局</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="flex-item uni-bg-red">A</view>
|
||||
<view class="flex-item uni-bg-green">B</view>
|
||||
<view class="flex-item uni-bg-blue">C</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-mt">
|
||||
flex-direction: column
|
||||
<text>\n纵向布局</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-column">
|
||||
<view class="flex-item flex-item-V uni-bg-red">A</view>
|
||||
<view class="flex-item flex-item-V uni-bg-green">B</view>
|
||||
<view class="flex-item flex-item-V uni-bg-blue">C</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-mt">
|
||||
更多布局示例
|
||||
<text>\nflex布局演示</text>
|
||||
</view>
|
||||
<view>
|
||||
<view class="text">纵向布局-自动宽度</view>
|
||||
<view class="text" style="width: 300rpx;">纵向布局-固定宽度</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text">横向布局-自动宽度</view>
|
||||
<view class="text">横向布局-自动宽度</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
|
||||
<view class="text">横向布局-居中</view>
|
||||
<view class="text">横向布局-居中</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row" style="-webkit-justify-content: flex-end;justify-content: flex-end;">
|
||||
<view class="text">横向布局-居右</view>
|
||||
<view class="text">横向布局-居右</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text" style="-webkit-flex: 1;flex: 1;">横向布局-平均分布</view>
|
||||
<view class="text" style="-webkit-flex: 1;flex: 1;">横向布局-平均分布</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row" style="-webkit-justify-content: space-between;justify-content: space-between;">
|
||||
<view class="text">横向布局-两端对齐</view>
|
||||
<view class="text">横向布局-两端对齐</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text" style="width: 200rpx;">固定宽度</view>
|
||||
<view class="text" style="-webkit-flex: 1;flex: 1;">自动占满余量</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text" style="width: 200rpx;">固定宽度</view>
|
||||
<view class="text" style="-webkit-flex: 1;flex: 1;">自动占满</view>
|
||||
<view class="text" style="width: 200rpx;">固定宽度</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">
|
||||
<view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view>
|
||||
<view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view>
|
||||
<view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text uni-flex" style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-start;align-items: flex-start;">
|
||||
<text>垂直居顶</text>
|
||||
</view>
|
||||
<view class="text uni-flex" style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
|
||||
<text>垂直居中</text>
|
||||
</view>
|
||||
<view class="text uni-flex" style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-end;align-items: flex-end;">
|
||||
<text>垂直居底</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-title uni-common-mt">
|
||||
组合示例
|
||||
<text>\nflex布局演示</text>
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text uni-flex" style="width: 200rpx;height: 220rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
|
||||
<image src="../../../static/plus.png" style="width: 150rpx;height: 150rpx;"></image>
|
||||
</view>
|
||||
<view class="uni-flex uni-column" style="-webkit-flex: 1;flex: 1;-webkit-justify-content: space-between;justify-content: space-between;">
|
||||
<view class="text" style="height: 120rpx;text-align: left;padding-left: 20rpx;padding-top: 10rpx;">
|
||||
文字居左，留出左间距
|
||||
</view>
|
||||
<view class="uni-flex uni-row">
|
||||
<view class="text" style="-webkit-flex: 1;flex: 1;">剩余数量</view>
|
||||
<view class="text" style="-webkit-flex: 1;flex: 1;">立即购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.flex-item {
|
||||
width: 33.3%;
|
||||
height: 200rpx;
|
||||
text-align: center;
|
||||
line-height: 200rpx;
|
||||
}
|
||||
|
||||
.flex-item-V {
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
text-align: center;
|
||||
line-height: 150rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: 15rpx 10rpx;
|
||||
padding: 0 20rpx;
|
||||
background-color: #ebebeb;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
/* text-indent: 40rpx; */
|
||||
}
|
||||
.flex-pc {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
22
pages/component/web-view-local/web-view-local.vue
Normal file
22
pages/component/web-view-local/web-view-local.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view>
|
||||
<web-view src="/hybrid/html/local.html" @message="getMessage"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
getMessage(e) {
|
||||
uni.showModal({
|
||||
content: JSON.stringify(e.detail),
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
32
pages/component/web-view/web-view.vue
Normal file
32
pages/component/web-view/web-view.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<view>
|
||||
<web-view :src="url" @message="getMessage"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
url: 'https://uniapp.dcloud.io/static/web-view.html'
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options && options.url) {
|
||||
this.url = options.url;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMessage(event) {
|
||||
uni.showModal({
|
||||
content: JSON.stringify(event.detail),
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user