Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5992
Star 90
Fork 162
H
hello uni-app x
提交 9e8cab6b 编写于 作者: H hdx
浏览文件
操作

scroll-view: 重构样式; rpx to px

上级 efec8371
隐藏空白更改
内联 并排
Showing with 366 addition and 366 deletion
common/uni.css
浏览文件 @ 9e8cab6b
......@@ -256,3 +256,9 @@
}
/* --tab-bar-eng-- */
/* #ifdef APP */
.page-scroll-view {
flex: 1;
}
/* #endif */
pages/component/scroll-view/scroll-view-props.uvue
浏览文件 @ 9e8cab6b
......@@ -219,6 +219,10 @@
border-width: 1px;
border-style: solid;
border-color: chocolate;
}
.uni-list {
flex: 1;
}
.uni-text {
......
pages/component/scroll-view/scroll-view-refresher-props.uvue
浏览文件 @ 9e8cab6b
<template>
<view style="flex:1;">
<page-head title="下拉刷新的scroll-view属性示例"></page-head>
<view class="uni-margin-wrap">
<scroll-view direction="vertical" :refresher-enabled="refresherEnabled" :refresher-threshold="refresherThreshold"
:refresher-default-style="refresherDefaultStyle" :refresher-background="refresherBackground"
:refresher-triggered="refresherTriggered" @refresherpulling="refresherpulling"
@refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore"
@refresherabort="refresherabort" style="width: 100%;height: 100%;">
<view class="item" :id="item.id" v-for="(item,_) in items">
<text class="uni-text">{{item.label}}</text>
</view>
</scroll-view>
</view>
<view class="page-scroll-view">
<page-head title="下拉刷新的scroll-view属性示例"></page-head>
<view class="uni-margin-wrap">
<scroll-view direction="vertical" :refresher-enabled="refresherEnabled" :refresher-threshold="refresherThreshold"
:refresher-default-style="refresherDefaultStyle" :refresher-background="refresherBackground"
:refresher-triggered="refresherTriggered" @refresherpulling="refresherpulling"
@refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore" @refresherabort="refresherabort"
style="width: 100%;height: 100%;">
<view class="item" :id="item.id" v-for="(item,_) in items">
<text class="uni-text">{{item.label}}</text>
</view>
</scroll-view>
</view>
<scroll-view class="uni-list" showScrollbar="true">
<view class="uni-common-pb"></view>
<text style="font-size: 12px;text-align: center;color: red; ">**下拉刷新的属性设置需要先打开下拉刷新开关**</text>
<view class="uni-common-pb"></view>
<view class="uni-option">
<text>是否开启下拉刷新</text>
<switch :checked="refresherEnabled" @change="handleTrunOnRefresher"></switch>
</view>
<view class="uni-option">
<text>设置下拉刷新状态</text>
<switch :disabled="!refresherEnabled" :checked="refresherTriggered"
@change="refresherTriggered=!refresherTriggered"></switch>
</view>
<scroll-view class="uni-list" showScrollbar="true">
<view class="uni-common-pb"></view>
<text style="font-size: 12px;text-align: center;color: red; ">**下拉刷新的属性设置需要先打开下拉刷新开关**</text>
<view class="uni-common-pb"></view>
<view class="uni-option">
<text>是否开启下拉刷新</text>
<switch :checked="refresherEnabled" @change="handleTrunOnRefresher"></switch>
</view>
<view class="uni-option">
<text>设置下拉刷新状态</text>
<switch :disabled="!refresherEnabled" :checked="refresherTriggered"
@change="refresherTriggered=!refresherTriggered"></switch>
</view>
<view class="uni-option">
<text>设置下拉刷新阈值</text>
<input style="width: 100rpx;border-width: 2rpx;text-align: center; border-style: solid;" :disabled="!refresherEnabled"
:value="refresherThreshold" type="number" @input="handleRefresherThresholdInput" />
</view>
<view class="uni-option">
<text>设置下拉刷新阈值</text>
<input style="width: 50px;border-width: 1px;text-align: center; border-style: solid;"
:disabled="!refresherEnabled" :value="refresherThreshold" type="number"
@input="handleRefresherThresholdInput" />
</view>
<view class="uni-option">
<text>设置下拉刷新区域背景颜色</text>
<input style="width: 200rpx;border-width: 2rpx;text-align: center; border-style: solid;" :disabled="!refresherEnabled"
:value="refresherBackground" @input="handleRefresherBackground" />
</view>
<view class="uni-option">
<text>设置下拉刷新区域背景颜色</text>
<input style="width: 100px;border-width: 1px;text-align: center; border-style: solid;"
:disabled="!refresherEnabled" :value="refresherBackground" @input="handleRefresherBackground" />
</view>
<view style="height: 200rpx;padding: 20rpx; ">
<text>设置下拉刷新默认样式</text>
<view class="uni-common-pb"></view>
<view style="flex-direction: row;">
<button style="padding: 5rpx; margin-right: 10rpx;" type="primary" size="mini"
@click="refresherDefaultStyle = `none`">none</button>
<button style="padding: 5rpx; margin-right: 10rpx; " type="primary" size="mini"
@click="refresherDefaultStyle = `black`">black</button>
<button style="padding: 5rpx;" type="primary" size="mini"
@click="refresherDefaultStyle = `white`">white</button>
</view>
</view>
<view style="height: 100px;padding: 10px; ">
<text>设置下拉刷新默认样式</text>
<view class="uni-common-pb"></view>
<view style="flex-direction: row;">
<button style="padding: 5rpx; margin-right: 5px;" type="primary" size="mini"
@click="refresherDefaultStyle = `none`">none</button>
<button style="padding: 5rpx; margin-right: 10rpx; " type="primary" size="mini"
@click="refresherDefaultStyle = `black`">black</button>
<button style="padding: 5rpx;" type="primary" size="mini"
@click="refresherDefaultStyle = `white`">white</button>
</view>
</view>
<view class="uni-common-pb"></view>
</scroll-view>
<view class="uni-common-pb"></view>
</scroll-view>
</view>
</view>
</template>
<script>
type Item = {
id : string,
label : string,
}
export default {
data() {
return {
items: [] as Item[],
refresherEnabled: false,
refresherTriggered: false,
refresherThreshold: 45,
refresherDefaultStyle: "white",
refresherBackground: "transparent",
}
},
onLoad() {
for (let i = 0; i < 10; i++) {
const item = {
id: "item" + i,
label: "item" + i,
} as Item;
this.items.push(item);
}
},
methods: {
handleTrunOnRefresher() {
this.refresherTriggered = false;
//不能同时关闭下拉状态和关闭下拉刷新。
setTimeout(() => {
this.refresherEnabled = !this.refresherEnabled;
}, 0)
},
handleRefresherThresholdInput(e : InputEvent) {
const value = e.detail.value;
if (value == "") {
this.refresherThreshold = 45;
} else {
this.refresherThreshold = parseInt(e.detail.value);
}
},
type Item = {
id : string,
label : string,
}
handleRefresherBackground(e : InputEvent) {
const value = e.detail.value;
this.refresherBackground = value;
},
//响应事件
refresherpulling() {
console.log("下拉刷新控件被下拉");
},
refresherrefresh() {
console.log("下拉刷新被触发");
this.refresherTriggered = true;
//不能同时关闭下拉状态和关闭下拉刷新。
setTimeout(() => {
this.refresherTriggered = false;
}, 1500)
},
refresherrestore() {
console.log("下拉刷新被复位");
},
refresherabort() {
console.log("下拉刷新被中止");
}
}
}
export default {
data() {
return {
items: [] as Item[],
refresherEnabled: false,
refresherTriggered: false,
refresherThreshold: 45,
refresherDefaultStyle: "white",
refresherBackground: "transparent",
}
},
onLoad() {
for (let i = 0; i < 10; i++) {
const item = {
id: "item" + i,
label: "item" + i,
} as Item;
this.items.push(item);
}
},
methods: {
handleTrunOnRefresher() {
this.refresherTriggered = false;
//不能同时关闭下拉状态和关闭下拉刷新。
setTimeout(() => {
this.refresherEnabled = !this.refresherEnabled;
}, 0)
},
handleRefresherThresholdInput(e : InputEvent) {
const value = e.detail.value;
if (value == "") {
this.refresherThreshold = 45;
} else {
this.refresherThreshold = parseInt(e.detail.value);
}
},
handleRefresherBackground(e : InputEvent) {
const value = e.detail.value;
this.refresherBackground = value;
},
//响应事件
refresherpulling() {
console.log("下拉刷新控件被下拉");
},
refresherrefresh() {
console.log("下拉刷新被触发");
this.refresherTriggered = true;
//不能同时关闭下拉状态和关闭下拉刷新。
setTimeout(() => {
this.refresherTriggered = false;
}, 1500)
},
refresherrestore() {
console.log("下拉刷新被复位");
},
refresherabort() {
console.log("下拉刷新被中止");
}
}
}
</script>
<style>
.uni-margin-wrap {
height: 400rpx;
margin-left: 50rpx;
margin-right: 50rpx;
}
.uni-margin-wrap {
height: 200px;
margin-left: 25px;
margin-right: 25px;
}
.item {
justify-content: center;
align-items: center;
height: 400rpx;
width: 100%;
background-color: azure;
border-width: 2rpx;
.item {
justify-content: center;
align-items: center;
height: 200px;
width: 100%;
background-color: azure;
border-width: 1px;
border-style: solid;
border-color: chocolate;
}
border-color: chocolate;
}
.uni-text {
color: black;
font-size: 50px;
}
.uni-text {
color: black;
font-size: 50px;
}
.uni-list {
flex: 1;
margin: 50rpx 50rpx 0rpx 50rpx;
}
.uni-list {
flex: 1;
margin: 25px 25px 0 25px;
}
.uni-option {
height: 100rpx;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20rpx;
}
.uni-option {
height: 50px;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.picker-view {
width: 100%;
height: 320px;
margin-top: 10px;
}
.picker-view {
width: 100%;
height: 320px;
margin-top: 10px;
}
</style>
pages/component/scroll-view/scroll-view-refresher.uvue
浏览文件 @ 9e8cab6b
<template>
<view class="container">
<page-head title="scroll-view 下拉刷新"></page-head>
<scroll-view class="scroll" refresher-enabled = true :refresher-triggered = "refresherTriggered"
@refresherrefresh="onRefresherrefresh" @refresherabort="onRefresherabort" @refresherrestore="onRefresherrestore"
@refresherpulling="onRefresherpulling" @scrolltolower="onScrolltolower">
<view v-for="key in scrollData" :key="key">
<view class="scroll-item">
<text class="scroll-item-title">{{key}}</text>
</view>
</view>
</scroll-view>
</view>
<view class="container">
<page-head title="scroll-view 下拉刷新"></page-head>
<scroll-view class="scroll" refresher-enabled=true :refresher-triggered="refresherTriggered"
@refresherrefresh="onRefresherrefresh" @refresherabort="onRefresherabort" @refresherrestore="onRefresherrestore"
@refresherpulling="onRefresherpulling" @scrolltolower="onScrolltolower">
<view v-for="key in scrollData" :key="key">
<view class="scroll-item">
<text class="scroll-item-title">{{key}}</text>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
export default {
data() {
return {
scrollData: [] as Array<string>,
refresherTriggered: false,
refresherrefresh: false
};
},
onLoad() {
let lists : Array<string> = []
for (let i = 0; i < 20; i++) {
lists.push("item---" + i)
}
this.scrollData = lists
},
data() {
return {
scrollData: [] as Array <string>,
refresherTriggered: false,
refresherrefresh: false
};
},
onLoad() {
let lists: Array < string > = []
for (let i = 0; i < 20; i++) {
lists.push("item---"+i)
}
this.scrollData = lists
},
methods: {
onRefresherrefresh(_ : RefresherEvent) {
this.refresherrefresh = true
console.log("onRefresherrefresh--------------下拉刷新触发")
this.refresherTriggered = true
setTimeout(() => {
this.refresherTriggered = false
}, 1500)
methods: {
onRefresherrefresh(_: RefresherEvent) {
this.refresherrefresh = true
console.log("onRefresherrefresh--------------下拉刷新触发")
this.refresherTriggered = true
setTimeout(() => {
this.refresherTriggered = false
}, 1500)
},
onRefresherabort(_: RefresherEvent) {
console.log("onRefresherabort------下拉刷新被中止")
},
onRefresherrestore(_: RefresherEvent) {
this.refresherrefresh = false
console.log("onRefresherrestore------下拉刷新被复位")
},
onRefresherpulling(e: RefresherEvent) {
console.log("onRefresherrestore------拉刷新控件被下拉-dy="+e.detail.dy)
},
onScrolltolower(e: ScrollToLowerEvent) {
console.log("onScrolltolower 滚动到底部-----"+e.detail.direction)
}
}
};
},
onRefresherabort(_ : RefresherEvent) {
console.log("onRefresherabort------下拉刷新被中止")
},
onRefresherrestore(_ : RefresherEvent) {
this.refresherrefresh = false
console.log("onRefresherrestore------下拉刷新被复位")
},
onRefresherpulling(e : RefresherEvent) {
console.log("onRefresherrestore------拉刷新控件被下拉-dy=" + e.detail.dy)
},
onScrolltolower(e : ScrollToLowerEvent) {
console.log("onScrolltolower 滚动到底部-----" + e.detail.direction)
}
}
};
</script>
<style>
.container{
display: flex;
flex-direction: column;
border:dashed;
flex: 1;
}
.scroll {
background-color: #eee;
position: relative;
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
border-color: red;
}
.scroll-item {
margin-left: 12rpx;
margin-right: 12rpx;
margin-top: 12rpx;
background-color: #fff;
border-radius: 8rpx;
}
.scroll-item-title {
width:100%;
height: 120rpx;
line-height: 120rpx;
text-align: center;
color: #555;
}
.container {
display: flex;
flex-direction: column;
border: dashed;
flex: 1;
}
.scroll {
background-color: #eee;
position: relative;
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
border-color: red;
}
.scroll-item {
margin-left: 6px;
margin-right: 6px;
margin-top: 6px;
background-color: #fff;
border-radius: 4px;
}
.scroll-item-title {
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
color: #555;
}
</style>
pages/component/scroll-view/scroll-view.uvue
浏览文件 @ 9e8cab6b
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view>
<page-head title="scroll-view,区域滚动视图"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
<text class="uni-title-text">Vertical Scroll</text>
<text class="uni-subtitle-text">纵向滚动</text>
</view>
<view>
<scroll-view :scroll-top="scrollTop" direction="vertical" class="scroll-Y" scroll-with-animation="true"
@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
<view class="scroll-view-item uni-bg-red"><text class="text">A</text></view>
<view class="scroll-view-item uni-bg-green"><text class="text">B</text></view>
<view class="scroll-view-item uni-bg-blue"><text class="text">C</text></view>
</scroll-view>
</view>
<view @tap="goTop" class="uni-center uni-common-mt">
<text class="uni-link">点击这里返回顶部</text>
</view>
<!-- #ifdef APP -->
<scroll-view class="page-scroll-view">
<!-- #endif -->
<view>
<page-head title="scroll-view,区域滚动视图"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
<text class="uni-title-text">Vertical Scroll</text>
<text class="uni-subtitle-text">纵向滚动</text>
</view>
<view>
<scroll-view :scroll-top="scrollTop" direction="vertical" class="scroll-Y" scroll-with-animation="true"
@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
<view class="scroll-view-item uni-bg-red"><text class="text">A</text></view>
<view class="scroll-view-item uni-bg-green"><text class="text">B</text></view>
<view class="scroll-view-item uni-bg-blue"><text class="text">C</text></view>
</scroll-view>
</view>
<view @tap="goTop" class="uni-center uni-common-mt">
<text class="uni-link">点击这里返回顶部</text>
</view>
<view class="uni-title uni-common-mt">
<text class="uni-title-text">Horizontal Scroll</text>
<text class="uni-subtitle-text">横向滚动</text>
</view>
<view>
<scroll-view class="scroll-view_H" direction="horizontal" @scroll="scroll" :scroll-left="120">
<view class="scroll-view-item_H uni-bg-red"><text class="text">A</text></view>
<view class="scroll-view-item_H uni-bg-green"><text class="text">B</text></view>
<view class="scroll-view-item_H uni-bg-blue"><text class="text">C</text></view>
</scroll-view>
</view>
<view class="uni-title uni-common-mt">
<text class="uni-title-text">Horizontal Scroll</text>
<text class="uni-subtitle-text">横向滚动</text>
</view>
<view>
<scroll-view class="scroll-view_H" direction="horizontal" @scroll="scroll" :scroll-left="120">
<view class="scroll-view-item_H uni-bg-red"><text class="text">A</text></view>
<view class="scroll-view-item_H uni-bg-green"><text class="text">B</text></view>
<view class="scroll-view-item_H uni-bg-blue"><text class="text">C</text></view>
</scroll-view>
</view>
<navigator url="/pages/component/scroll-view/scroll-view-props" hover-class="none">
<button type="primary" class="button">
非下拉刷新的属性示例
</button>
</navigator>
<view class="uni-common-pb"></view>
<navigator url="/pages/component/scroll-view/scroll-view-props" hover-class="none">
<button type="primary" class="button">
非下拉刷新的属性示例
</button>
</navigator>
<view class="uni-common-pb"></view>
<!-- #ifdef APP -->
<navigator url="/pages/component/scroll-view/scroll-view-refresher-props" hover-class="none">
<button type="primary" class="button">
下拉刷新的属性示例
</button>
</navigator>
<view class="uni-common-pb"></view>
<navigator url="/pages/component/scroll-view/scroll-view-refresher" hover-class="none">
<button type="primary" class="button"> 默认下拉刷新示例 </button>
</navigator>
<view class="uni-common-pb"></view>
<navigator url="/pages/component/scroll-view/scroll-view-custom-refresher-props" hover-class="none">
<button type="primary" class="button">
自定义下拉刷新示例
</button>
</navigator>
<view class="uni-common-pb"></view>
<navigator url="/pages/component/scroll-view/scroll-view-refresher-props" hover-class="none">
<button type="primary" class="button">
下拉刷新的属性示例
</button>
</navigator>
<view class="uni-common-pb"></view>
<navigator url="/pages/component/scroll-view/scroll-view-refresher" hover-class="none">
<button type="primary" class="button"> 默认下拉刷新示例 </button>
</navigator>
<view class="uni-common-pb"></view>
<navigator url="/pages/component/scroll-view/scroll-view-custom-refresher-props" hover-class="none">
<button type="primary" class="button">
自定义下拉刷新示例
</button>
</navigator>
<view class="uni-common-pb"></view>
<!-- #endif -->
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
export default {
data() {
return {
scrollTop: 0,
oldScrollTop: 0,
}
},
methods: {
upper: function (e : ScrollToUpperEvent) {
console.log(e)
},
lower: function (e : ScrollToLowerEvent) {
console.log(e)
},
scroll: function (e : ScrollEvent) {
this.oldScrollTop = e.detail.scrollTop
},
goTop: function () {
// 解决view层不同步的问题
this.scrollTop = this.oldScrollTop
this.$nextTick(function () {
this.scrollTop = 0
})
uni.showToast({
icon: 'none',
title: '纵向滚动 scrollTop 值已被修改为 0',
})
}
},
}
export default {
data() {
return {
scrollTop: 0,
oldScrollTop: 0,
}
},
methods: {
upper: function (e : ScrollToUpperEvent) {
console.log(e)
},
lower: function (e : ScrollToLowerEvent) {
console.log(e)
},
scroll: function (e : ScrollEvent) {
this.oldScrollTop = e.detail.scrollTop
},
goTop: function () {
// 解决view层不同步的问题
this.scrollTop = this.oldScrollTop
this.$nextTick(function () {
this.scrollTop = 0
})
uni.showToast({
icon: 'none',
title: '纵向滚动 scrollTop 值已被修改为 0',
})
}
},
}
</script>
<style>
.scroll-Y {
height: 300rpx;
}
.scroll-Y {
height: 150px;
}
.scroll-view_H {
width: 100%;
flex-direction: row;
}
.scroll-view_H {
width: 100%;
flex-direction: row;
}
.scroll-view-item {
height: 300rpx;
justify-content: center;
align-items: center;
}
.scroll-view-item {
height: 150px;
justify-content: center;
align-items: center;
}
.scroll-view-item_H {
width: 690rpx;
height: 300rpx;
justify-content: center;
align-items: center;
}
.scroll-view-item_H {
width: 100%;
height: 150px;
justify-content: center;
align-items: center;
}
.text {
font-size: 36rpx;
color: #ffffff;
}
.text {
font-size: 18px;
color: #ffffff;
}
.button {
margin-top: 30rpx;
}
.button {
margin-top: 15px;
}
</style>
pages/component/swiper/swiper.uvue
浏览文件 @ 9e8cab6b
......@@ -194,13 +194,7 @@
}
</script>
<style>
/* #ifdef APP */
.page-scroll-view {
flex: 1;
}
/* #endif */
<style>
.swiper {
height: 150px;
}
......
pages/component/text/text-props.uvue
浏览文件 @ 9e8cab6b
<template>
<scroll-view style="flex: 1;">
<scroll-view class="page-scroll-view">
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
......@@ -118,7 +118,6 @@ export default {
.text-box {
margin-bottom: 20px;
padding: 20px 0;
display: flex;
background-color: #ffffff;
justify-content: center;
align-items: center;
......
pages/component/video/video-format.uvue
浏览文件 @ 9e8cab6b
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1;">
<!-- #endif -->
<scroll-view class="page-scroll-view">
<!-- #endif -->
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
......@@ -20,12 +20,17 @@
<video :id="'video-' + item.format" class="video" :src="item.src" :controls="true" :direction="-90"></video>
</view>
</view>
<!-- #ifdef APP -->
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
type VideoFormat = {
format : string
src : string
}
export default {
data() {
return {
......@@ -87,7 +92,7 @@
}
},
methods: {
onError: function (format: string, e : VideoErrorEvent) {
onError: function (format : string, e : VideoErrorEvent) {
console.log(format + ":" + JSON.stringify(e));
if (format != "错误路径") {
this.isError = true;
......@@ -95,15 +100,10 @@
}
}
}
type VideoFormat = {
format : string
src : string
}
</script>
<style>
.video {
height: 400rpx;
height: 200px;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或