feat:首页输入框、文字卡片
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"component": true,
|
"component": true,
|
||||||
"styleIsolation": "apply-shared",
|
"styleIsolation": "apply-shared",
|
||||||
"usingComponents": {}
|
"usingComponents": {}
|
||||||
}
|
}
|
||||||
@@ -1,96 +1,98 @@
|
|||||||
.weui-navigation-bar {
|
.weui-navigation-bar {
|
||||||
--weui-FG-0:rgba(0,0,0,.9);
|
--weui-FG-0: rgba(0, 0, 0, .9);
|
||||||
--height: 44px;
|
--height: 44px;
|
||||||
--left: 16px;
|
--left: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.weui-navigation-bar .android {
|
.weui-navigation-bar .android {
|
||||||
--height: 48px;
|
--height: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.weui-navigation-bar {
|
.weui-navigation-bar {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
color: var(--weui-FG-0);
|
color: var(--weui-FG-0);
|
||||||
flex: none;
|
flex: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.weui-navigation-bar__inner {
|
.weui-navigation-bar__inner {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: calc(var(--height) + env(safe-area-inset-top));
|
height: calc(var(--height) + env(safe-area-inset-top));
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding-top: env(safe-area-inset-top);
|
padding-top: env(safe-area-inset-top);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.weui-navigation-bar__left {
|
.weui-navigation-bar__left {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-left: var(--left);
|
padding-left: var(--left);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.weui-navigation-bar__btn_goback_wrapper {
|
.weui-navigation-bar__btn_goback_wrapper {
|
||||||
padding: 11px 18px 11px 16px;
|
padding: 11px 18px 11px 16px;
|
||||||
margin: -11px -18px -11px -16px;
|
margin: -11px -18px -11px -16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.weui-navigation-bar__btn_goback_wrapper.weui-active {
|
.weui-navigation-bar__btn_goback_wrapper.weui-active {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.weui-navigation-bar__btn_goback {
|
.weui-navigation-bar__btn_goback {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
|
-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
|
||||||
mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
|
mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
|
||||||
-webkit-mask-size: cover;
|
-webkit-mask-size: cover;
|
||||||
mask-size: cover;
|
mask-size: cover;
|
||||||
background-color: var(--weui-FG-0);
|
background-color: var(--weui-FG-0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.weui-navigation-bar__center {
|
.weui-navigation-bar__center {
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.weui-navigation-bar__loading {
|
.weui-navigation-bar__loading {
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.weui-loading {
|
.weui-loading {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
display: block;
|
display: block;
|
||||||
background: transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
|
background: transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
animation: loading linear infinite 1s;
|
animation: loading linear infinite 1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes loading {
|
@keyframes loading {
|
||||||
from {
|
from {
|
||||||
transform: rotate(0);
|
transform: rotate(0);
|
||||||
}
|
}
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
to {
|
||||||
}
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -1,105 +1,106 @@
|
|||||||
Component({
|
Component({
|
||||||
options: {
|
options: {
|
||||||
multipleSlots: true // 在组件定义时的选项中启用多slot支持
|
multipleSlots: true, // 在组件定义时的选项中启用多slot支持
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 组件的属性列表
|
|
||||||
*/
|
|
||||||
properties: {
|
|
||||||
extClass: {
|
|
||||||
type: String,
|
|
||||||
value: ''
|
|
||||||
},
|
},
|
||||||
title: {
|
/**
|
||||||
type: String,
|
* 组件的属性列表
|
||||||
value: ''
|
*/
|
||||||
|
properties: {
|
||||||
|
extClass: {
|
||||||
|
type: String,
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
background: {
|
||||||
|
type: String,
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
back: {
|
||||||
|
type: Boolean,
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
homeButton: {
|
||||||
|
type: Boolean,
|
||||||
|
value: false,
|
||||||
|
},
|
||||||
|
animated: {
|
||||||
|
// 显示隐藏的时候opacity动画效果
|
||||||
|
type: Boolean,
|
||||||
|
value: true,
|
||||||
|
},
|
||||||
|
show: {
|
||||||
|
// 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
|
||||||
|
type: Boolean,
|
||||||
|
value: true,
|
||||||
|
observer: '_showChange',
|
||||||
|
},
|
||||||
|
// back为true的时候，返回的页面深度
|
||||||
|
delta: {
|
||||||
|
type: Number,
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
background: {
|
/**
|
||||||
type: String,
|
* 组件的初始数据
|
||||||
value: ''
|
*/
|
||||||
|
data: {
|
||||||
|
displayStyle: '',
|
||||||
},
|
},
|
||||||
color: {
|
lifetimes: {
|
||||||
type: String,
|
attached() {
|
||||||
value: ''
|
const rect = wx.getMenuButtonBoundingClientRect();
|
||||||
|
wx.getSystemInfo({
|
||||||
|
success: (res) => {
|
||||||
|
const isAndroid = res.platform === 'android';
|
||||||
|
const isDevtools = res.platform === 'devtools';
|
||||||
|
this.setData({
|
||||||
|
ios: !isAndroid,
|
||||||
|
innerPaddingRight: `padding-right: ${res.windowWidth - rect.left}px`,
|
||||||
|
leftWidth: `width: ${res.windowWidth - rect.left}px`,
|
||||||
|
safeAreaTop:
|
||||||
|
isDevtools || isAndroid
|
||||||
|
? `height: calc(var(--height) + ${res.safeArea.top}px); padding-top: ${res.safeArea.top}px`
|
||||||
|
: ``,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
back: {
|
/**
|
||||||
type: Boolean,
|
* 组件的方法列表
|
||||||
value: true
|
*/
|
||||||
|
methods: {
|
||||||
|
_showChange(show: boolean) {
|
||||||
|
const animated = this.data.animated;
|
||||||
|
let displayStyle = '';
|
||||||
|
if (animated) {
|
||||||
|
displayStyle = `opacity: ${show ? '1' : '0'};transition:opacity 0.5s;`;
|
||||||
|
} else {
|
||||||
|
displayStyle = `display: ${show ? '' : 'none'}`;
|
||||||
|
}
|
||||||
|
this.setData({
|
||||||
|
displayStyle,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
back() {
|
||||||
|
const data = this.data;
|
||||||
|
if (data.delta) {
|
||||||
|
wx.navigateBack({
|
||||||
|
delta: data.delta,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.triggerEvent('back', { delta: data.delta }, {});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
loading: {
|
});
|
||||||
type: Boolean,
|
|
||||||
value: false
|
|
||||||
},
|
|
||||||
homeButton: {
|
|
||||||
type: Boolean,
|
|
||||||
value: false,
|
|
||||||
},
|
|
||||||
animated: {
|
|
||||||
// 显示隐藏的时候opacity动画效果
|
|
||||||
type: Boolean,
|
|
||||||
value: true
|
|
||||||
},
|
|
||||||
show: {
|
|
||||||
// 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
|
|
||||||
type: Boolean,
|
|
||||||
value: true,
|
|
||||||
observer: '_showChange'
|
|
||||||
},
|
|
||||||
// back为true的时候，返回的页面深度
|
|
||||||
delta: {
|
|
||||||
type: Number,
|
|
||||||
value: 1
|
|
||||||
},
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 组件的初始数据
|
|
||||||
*/
|
|
||||||
data: {
|
|
||||||
displayStyle: ''
|
|
||||||
},
|
|
||||||
lifetimes: {
|
|
||||||
attached() {
|
|
||||||
const rect = wx.getMenuButtonBoundingClientRect()
|
|
||||||
wx.getSystemInfo({
|
|
||||||
success: (res) => {
|
|
||||||
const isAndroid = res.platform === 'android'
|
|
||||||
const isDevtools = res.platform === 'devtools'
|
|
||||||
this.setData({
|
|
||||||
ios: !isAndroid,
|
|
||||||
innerPaddingRight: `padding-right: ${res.windowWidth - rect.left}px`,
|
|
||||||
leftWidth: `width: ${res.windowWidth - rect.left }px`,
|
|
||||||
safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${res.safeArea.top}px); padding-top: ${res.safeArea.top}px` : ``
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 组件的方法列表
|
|
||||||
*/
|
|
||||||
methods: {
|
|
||||||
_showChange(show: boolean) {
|
|
||||||
const animated = this.data.animated
|
|
||||||
let displayStyle = ''
|
|
||||||
if (animated) {
|
|
||||||
displayStyle = `opacity: ${
|
|
||||||
show ? '1' : '0'
|
|
||||||
};transition:opacity 0.5s;`
|
|
||||||
} else {
|
|
||||||
displayStyle = `display: ${show ? '' : 'none'}`
|
|
||||||
}
|
|
||||||
this.setData({
|
|
||||||
displayStyle
|
|
||||||
})
|
|
||||||
},
|
|
||||||
back() {
|
|
||||||
const data = this.data
|
|
||||||
if (data.delta) {
|
|
||||||
wx.navigateBack({
|
|
||||||
delta: data.delta
|
|
||||||
})
|
|
||||||
}
|
|
||||||
this.triggerEvent('back', { delta: data.delta }, {})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|||||||
@@ -1,64 +1,61 @@
|
|||||||
<view class="weui-navigation-bar {{extClass}}">
|
<view class="weui-navigation-bar {{extClass}}">
|
||||||
<view class="weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}" style="color: {{color}}; background: {{background}}; {{displayStyle}}; {{innerPaddingRight}}; {{safeAreaTop}};">
|
<view
|
||||||
|
class="weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}"
|
||||||
|
style="color: {{color}}; background: {{background}}; {{displayStyle}}; {{innerPaddingRight}}; {{safeAreaTop}};">
|
||||||
|
<!-- 左侧按钮 -->
|
||||||
|
<view class="weui-navigation-bar__left" style="{{leftWidth}};">
|
||||||
|
<block wx:if="{{back || homeButton}}">
|
||||||
|
<!-- 返回上一页 -->
|
||||||
|
<block wx:if="{{back}}">
|
||||||
|
<view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_goback">
|
||||||
|
<view
|
||||||
|
bindtap="back"
|
||||||
|
class="weui-navigation-bar__btn_goback_wrapper"
|
||||||
|
hover-class="weui-active"
|
||||||
|
hover-stay-time="100"
|
||||||
|
aria-role="button"
|
||||||
|
aria-label="返回">
|
||||||
|
<view
|
||||||
|
class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<!-- 返回首页 -->
|
||||||
|
<block wx:if="{{homeButton}}">
|
||||||
|
<view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_home">
|
||||||
|
<view
|
||||||
|
bindtap="home"
|
||||||
|
class="weui-navigation-bar__btn_home_wrapper"
|
||||||
|
hover-class="weui-active"
|
||||||
|
aria-role="button"
|
||||||
|
aria-label="首页">
|
||||||
|
<view
|
||||||
|
class="weui-navigation-bar__button weui-navigation-bar__btn_home"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
</block>
|
||||||
|
<block wx:else>
|
||||||
|
<slot name="left"></slot>
|
||||||
|
</block>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- 左侧按钮 -->
|
<!-- 标题 -->
|
||||||
<view class='weui-navigation-bar__left' style="{{leftWidth}};">
|
<view class="weui-navigation-bar__center">
|
||||||
<block wx:if="{{back || homeButton}}">
|
<view wx:if="{{loading}}" class="weui-navigation-bar__loading" aria-role="alert">
|
||||||
<!-- 返回上一页 -->
|
<view class="weui-loading" aria-role="img" aria-label="加载中"></view>
|
||||||
<block wx:if="{{back}}">
|
|
||||||
<view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_goback">
|
|
||||||
<view
|
|
||||||
bindtap="back"
|
|
||||||
class="weui-navigation-bar__btn_goback_wrapper"
|
|
||||||
hover-class="weui-active"
|
|
||||||
hover-stay-time="100"
|
|
||||||
aria-role="button"
|
|
||||||
aria-label="返回"
|
|
||||||
>
|
|
||||||
<view class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
<block wx:if="{{title}}">
|
||||||
</block>
|
<text>{{title}}</text>
|
||||||
<!-- 返回首页 -->
|
</block>
|
||||||
<block wx:if="{{homeButton}}">
|
<block wx:else>
|
||||||
<view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_home">
|
<slot name="center"></slot>
|
||||||
<view
|
</block>
|
||||||
bindtap="home"
|
</view>
|
||||||
class="weui-navigation-bar__btn_home_wrapper"
|
|
||||||
hover-class="weui-active"
|
|
||||||
aria-role="button"
|
|
||||||
aria-label="首页"
|
|
||||||
>
|
|
||||||
<view class="weui-navigation-bar__button weui-navigation-bar__btn_home"></view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</block>
|
|
||||||
</block>
|
|
||||||
<block wx:else>
|
|
||||||
<slot name="left"></slot>
|
|
||||||
</block>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 标题 -->
|
<!-- 右侧留空 -->
|
||||||
<view class='weui-navigation-bar__center'>
|
<view class="weui-navigation-bar__right">
|
||||||
<view wx:if="{{loading}}" class="weui-navigation-bar__loading" aria-role="alert">
|
<slot name="right"></slot>
|
||||||
<view
|
</view>
|
||||||
class="weui-loading"
|
|
||||||
aria-role="img"
|
|
||||||
aria-label="加载中"
|
|
||||||
></view>
|
|
||||||
</view>
|
|
||||||
<block wx:if="{{title}}">
|
|
||||||
<text>{{title}}</text>
|
|
||||||
</block>
|
|
||||||
<block wx:else>
|
|
||||||
<slot name="center"></slot>
|
|
||||||
</block>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 右侧留空 -->
|
|
||||||
<view class='weui-navigation-bar__right'>
|
|
||||||
<slot name="right"></slot>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"styleIsolation": "apply-shared",
|
||||||
|
"usingComponents": {
|
||||||
|
"van-icon": "@vant/weapp/icon/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
.word-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
// width: 324rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
background-color: #EEFCFC;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.35);
|
||||||
|
|
||||||
|
.color-box {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #ff0000;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
border: 1rpx solid #141414;
|
||||||
|
}
|
||||||
|
|
||||||
|
.word-box {
|
||||||
|
margin: 0 24rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 82rpx;
|
||||||
|
height: 52rpx;
|
||||||
|
border: 1rpx solid #000;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
.word-content {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #141414;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-icon {
|
||||||
|
padding: 20rpx;
|
||||||
|
margin-right: 8rpx;
|
||||||
|
color: #141414;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
Component({
|
||||||
|
options: {
|
||||||
|
// multipleSlots: true, // 在组件定义时的选项中启用多slot支持
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 组件的属性列表
|
||||||
|
*/
|
||||||
|
properties: {
|
||||||
|
extClass: {
|
||||||
|
type: String,
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 组件的初始数据
|
||||||
|
*/
|
||||||
|
data: {
|
||||||
|
displayStyle: '',
|
||||||
|
},
|
||||||
|
lifetimes: {
|
||||||
|
attached() {},
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 组件的方法列表
|
||||||
|
*/
|
||||||
|
methods: {},
|
||||||
|
});
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
<view class="word-card">
|
||||||
|
<view class="color-box"></view>
|
||||||
|
<view class="word-box">
|
||||||
|
<text class="word-content">文</text>
|
||||||
|
</view>
|
||||||
|
<view class="delete-icon">
|
||||||
|
<van-icon name="delete" custom-class="delete-icon-inner" size="44rpx" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"styleIsolation": "apply-shared",
|
||||||
|
"usingComponents": {
|
||||||
|
"van-icon": "@vant/weapp/icon/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
.word-input-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.word-input-icon {
|
||||||
|
// border: 1px solid red;
|
||||||
|
padding: 22rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.word-input {
|
||||||
|
flex: 1;
|
||||||
|
height: 92rpx;
|
||||||
|
padding-right: 20rpx;
|
||||||
|
// padding: 0 20rpx 0 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 92rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
Component({
|
||||||
|
options: {
|
||||||
|
// multipleSlots: true, // 在组件定义时的选项中启用多slot支持
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 组件的属性列表
|
||||||
|
*/
|
||||||
|
properties: {
|
||||||
|
extClass: {
|
||||||
|
type: String,
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 组件的初始数据
|
||||||
|
*/
|
||||||
|
data: {
|
||||||
|
displayStyle: '',
|
||||||
|
},
|
||||||
|
lifetimes: {
|
||||||
|
attached() {},
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 组件的方法列表
|
||||||
|
*/
|
||||||
|
methods: {},
|
||||||
|
});
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
<view class="word-input-container">
|
||||||
|
<van-icon name="miniprogram-o" custom-class="word-input-icon" size="48rpx" />
|
||||||
|
<input
|
||||||
|
class="word-input"
|
||||||
|
type="text"
|
||||||
|
placeholder="请输入小朋友喜欢的文字"
|
||||||
|
bindconfirm="onConfirm"
|
||||||
|
maxlength="6" />
|
||||||
|
</view>
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"navigationBarTitleText": "首页",
|
||||||
|
"navigationBarBackgroundColor": "#d2e7d8",
|
||||||
|
"homeButton": true,
|
||||||
|
"backgroundColor": "#e8eddb",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
/**index.less**/
|
||||||
|
page {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-view {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
margin: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||||
|
width: calc(33.33% - 20px);
|
||||||
|
/* Adjust width for three cards per row */
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* Ensure padding and margin are included in the width */
|
||||||
|
display: inline-block;
|
||||||
|
/* Allow cards to sit next to each other */
|
||||||
|
vertical-align: top;
|
||||||
|
/* Align cards to the top */
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
Page({
|
||||||
|
data: {
|
||||||
|
cards: [
|
||||||
|
{
|
||||||
|
key: 0,
|
||||||
|
title: '文本绘制',
|
||||||
|
url: '/demoPages/textPaint/textPaint',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 1,
|
||||||
|
title: '文本绘制2',
|
||||||
|
url: '/demoPages/textPaint2/textPaint',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 2,
|
||||||
|
title: '文本绘制',
|
||||||
|
url: '/demoPages/textPaint/textPaint',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 3,
|
||||||
|
title: '文本绘制',
|
||||||
|
url: '/demoPages/textPaint/textPaint',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
tapCard(e: WechatMiniprogram.TouchEvent) {
|
||||||
|
const { url } = e.currentTarget.dataset;
|
||||||
|
console.log('navigateTo url:', url);
|
||||||
|
wx.navigateTo({ url });
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
<!--index.wxml-->
|
||||||
|
<scroll-view class="scroll-view" scroll-y type="list">
|
||||||
|
<view
|
||||||
|
class="card"
|
||||||
|
wx:for="{{cards}}"
|
||||||
|
wx:for-item="card"
|
||||||
|
wx:key="*this"
|
||||||
|
bindtap="tapCard"
|
||||||
|
data-url="{{card.url}}">
|
||||||
|
<view class="card-title">{{card.title}}</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
@@ -1,7 +1,11 @@
|
|||||||
{
|
{
|
||||||
"navigationBarTitleText": "首页",
|
"navigationBarTitleText": "涂鸦丫",
|
||||||
"navigationBarBackgroundColor": "#d2e7d8",
|
"navigationBarBackgroundColor": "#FFD719",
|
||||||
"homeButton": true,
|
"homeButton": true,
|
||||||
"backgroundColor": "#e8eddb",
|
"backgroundColor": "#F6F6F6",
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false,
|
||||||
|
"usingComponents": {
|
||||||
|
"word-input": "../../components/word-input/word-input",
|
||||||
|
"word-card": "../../components/word-card/word-card"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,33 +1,38 @@
|
|||||||
/**index.less**/
|
|
||||||
page {
|
page {
|
||||||
height: 100vh;
|
background-color: #F6F6F6;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.scroll-view {
|
.page-container {
|
||||||
flex: 1;
|
background-color: #F6F6F6;
|
||||||
overflow-y: hidden;
|
padding: 24rpx;
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
margin: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
||||||
width: calc(33.33% - 20px);
|
|
||||||
/* Adjust width for three cards per row */
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
/* Ensure padding and margin are included in the width */
|
|
||||||
display: inline-block;
|
|
||||||
/* Allow cards to sit next to each other */
|
|
||||||
vertical-align: top;
|
|
||||||
/* Align cards to the top */
|
|
||||||
|
|
||||||
.card-title {
|
.wrapper {
|
||||||
font-size: 18px;
|
background-color: #ffffff;
|
||||||
font-weight: bold;
|
border-radius: 20rpx;
|
||||||
color: #333;
|
padding: 30rpx;
|
||||||
|
box-shadow: 0 3rpx 4rpx rgba(0, 0, 0, 0.15);
|
||||||
|
margin: 30rpx 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.wrapper-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #141414;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.word-card-box {
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.word-card-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,28 +1,5 @@
|
|||||||
Page({
|
Page({
|
||||||
data: {
|
data: {},
|
||||||
cards: [
|
|
||||||
{
|
|
||||||
key: 0,
|
|
||||||
title: '文本绘制',
|
|
||||||
url: '/demoPages/textPaint/textPaint',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 1,
|
|
||||||
title: '文本绘制2',
|
|
||||||
url: '/demoPages/textPaint2/textPaint',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 2,
|
|
||||||
title: '文本绘制',
|
|
||||||
url: '/demoPages/textPaint/textPaint',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 3,
|
|
||||||
title: '文本绘制',
|
|
||||||
url: '/demoPages/textPaint/textPaint',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
tapCard(e: WechatMiniprogram.TouchEvent) {
|
tapCard(e: WechatMiniprogram.TouchEvent) {
|
||||||
const { url } = e.currentTarget.dataset;
|
const { url } = e.currentTarget.dataset;
|
||||||
|
|||||||
@@ -1,12 +1,19 @@
|
|||||||
<!--index.wxml-->
|
<scroll-view class="page-container" scroll-y type="list">
|
||||||
<scroll-view class="scroll-view" scroll-y type="list">
|
<view class="wrapper">
|
||||||
<view
|
<text class="wrapper-title">设置文字和颜色</text>
|
||||||
class="card"
|
<word-input />
|
||||||
wx:for="{{cards}}"
|
<view class="word-card-box">
|
||||||
wx:for-item="card"
|
<view class="word-card-list">
|
||||||
wx:key="*this"
|
<word-card />
|
||||||
bindtap="tapCard"
|
<word-card />
|
||||||
data-url="{{card.url}}">
|
</view>
|
||||||
<view class="card-title">{{card.title}}</view>
|
<view class="word-card-list">
|
||||||
|
<word-card />
|
||||||
|
<word-card />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="wrapper">
|
||||||
|
<text class="wrapper-title">预览打印效果</text>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
|||||||
@@ -0,0 +1 @@
|
|||||||
|
# ui 目录用于放UI类组件
|
||||||
Reference in New Issue
Block a user