提交 9e8cab6b 编写于 作者: H hdx

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

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