Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
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
......@@ -221,6 +221,10 @@
border-color: chocolate;
}
.uni-list {
flex: 1;
}
.uni-text {
color: black;
font-size: 50px;
......
pages/component/scroll-view/scroll-view-refresher-props.uvue
浏览文件 @ 9e8cab6b
<template>
<view style="flex:1;">
<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%;">
@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>
......@@ -29,21 +29,22 @@
<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" />
<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" />
<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; ">
<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: 10rpx;" type="primary" size="mini"
<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>
......@@ -63,6 +64,7 @@
id : string,
label : string,
}
export default {
data() {
return {
......@@ -99,7 +101,6 @@
this.refresherThreshold = parseInt(e.detail.value);
}
},
handleRefresherBackground(e : InputEvent) {
const value = e.detail.value;
this.refresherBackground = value;
......@@ -128,18 +129,18 @@
<style>
.uni-margin-wrap {
height: 400rpx;
margin-left: 50rpx;
margin-right: 50rpx;
height: 200px;
margin-left: 25px;
margin-right: 25px;
}
.item {
justify-content: center;
align-items: center;
height: 400rpx;
height: 200px;
width: 100%;
background-color: azure;
border-width: 2rpx;
border-width: 1px;
border-style: solid;
border-color: chocolate;
}
......@@ -151,15 +152,15 @@
.uni-list {
flex: 1;
margin: 50rpx 50rpx 0rpx 50rpx;
margin: 25px 25px 0 25px;
}
.uni-option {
height: 100rpx;
height: 50px;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20rpx;
padding: 10px;
}
.picker-view {
......
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"
<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">
......@@ -14,24 +14,23 @@
</template>
<script>
export default {
data() {
return {
scrollData: [] as Array <string>,
scrollData: [] as Array<string>,
refresherTriggered: false,
refresherrefresh: false
};
},
onLoad() {
let lists: Array < string > = []
let lists : Array<string> = []
for (let i = 0; i < 20; i++) {
lists.push("item---"+i)
lists.push("item---" + i)
}
this.scrollData = lists
},
methods: {
onRefresherrefresh(_: RefresherEvent) {
onRefresherrefresh(_ : RefresherEvent) {
this.refresherrefresh = true
console.log("onRefresherrefresh--------------下拉刷新触发")
this.refresherTriggered = true
......@@ -40,28 +39,28 @@
}, 1500)
},
onRefresherabort(_: RefresherEvent) {
onRefresherabort(_ : RefresherEvent) {
console.log("onRefresherabort------下拉刷新被中止")
},
onRefresherrestore(_: RefresherEvent) {
onRefresherrestore(_ : RefresherEvent) {
this.refresherrefresh = false
console.log("onRefresherrestore------下拉刷新被复位")
},
onRefresherpulling(e: RefresherEvent) {
console.log("onRefresherrestore------拉刷新控件被下拉-dy="+e.detail.dy)
onRefresherpulling(e : RefresherEvent) {
console.log("onRefresherrestore------拉刷新控件被下拉-dy=" + e.detail.dy)
},
onScrolltolower(e: ScrollToLowerEvent) {
console.log("onScrolltolower 滚动到底部-----"+e.detail.direction)
onScrolltolower(e : ScrollToLowerEvent) {
console.log("onScrolltolower 滚动到底部-----" + e.detail.direction)
}
}
};
</script>
<style>
.container{
.container {
display: flex;
flex-direction: column;
border:dashed;
border: dashed;
flex: 1;
}
......@@ -76,21 +75,18 @@
}
.scroll-item {
margin-left: 12rpx;
margin-right: 12rpx;
margin-top: 12rpx;
margin-left: 6px;
margin-right: 6px;
margin-top: 6px;
background-color: #fff;
border-radius: 8rpx;
border-radius: 4px;
}
.scroll-item-title {
width:100%;
height: 120rpx;
line-height: 120rpx;
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">
<scroll-view class="page-scroll-view">
<!-- #endif -->
<view>
<page-head title="scroll-view,区域滚动视图"></page-head>
......@@ -99,7 +99,7 @@
<style>
.scroll-Y {
height: 300rpx;
height: 150px;
}
.scroll-view_H {
......@@ -108,24 +108,24 @@
}
.scroll-view-item {
height: 300rpx;
height: 150px;
justify-content: center;
align-items: center;
}
.scroll-view-item_H {
width: 690rpx;
height: 300rpx;
width: 100%;
height: 150px;
justify-content: center;
align-items: center;
}
.text {
font-size: 36rpx;
font-size: 18px;
color: #ffffff;
}
.button {
margin-top: 30rpx;
margin-top: 15px;
}
</style>
pages/component/swiper/swiper.uvue
浏览文件 @ 9e8cab6b
......@@ -195,12 +195,6 @@
</script>
<style>
/* #ifdef APP */
.page-scroll-view {
flex: 1;
}
/* #endif */
.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;">
<scroll-view class="page-scroll-view">
<!-- #endif -->
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
......@@ -26,6 +26,11 @@
</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.
先完成此消息的编辑！
想要评论请 注册 或