joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:首页输入框、文字卡片

Browse Source
This commit is contained in:
joey
2025-05-30 20:49:35 +08:00
parent c00c45a9be
commit 419818eb24
22 changed files with 517 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/demoIndex/index.json
+7
View File
@@ -0,0 +1,7 @@
{
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#d2e7d8",
"homeButton": true,
"backgroundColor": "#e8eddb",
"enablePullDownRefresh": false
}
miniprogram/pages/demoIndex/index.less
+33
View File
@@ -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;
}
}
miniprogram/pages/demoIndex/index.ts
+32
View File
@@ -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 });
},
});
miniprogram/pages/demoIndex/index.wxml
+12
View File
@@ -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>
miniprogram/pages/index/index.json
+8 -4
View File
@@ -1,7 +1,11 @@
{
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#d2e7d8",
"navigationBarTitleText": "涂鸦丫",
"navigationBarBackgroundColor": "#FFD719",
"homeButton": true,
"backgroundColor": "#e8eddb",
"enablePullDownRefresh": false
"backgroundColor": "#F6F6F6",
"enablePullDownRefresh": false,
"usingComponents": {
"word-input": "../../components/word-input/word-input",
"word-card": "../../components/word-card/word-card"
}
}
miniprogram/pages/index/index.less
+31 -26
View File
@@ -1,33 +1,38 @@
/**index.less**/
page {
height: 100vh;
display: flex;
flex-direction: column;
background-color: #F6F6F6;
}
.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 */
.page-container {
background-color: #F6F6F6;
padding: 24rpx;
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;
.wrapper {
background-color: #ffffff;
border-radius: 20rpx;
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;
}
}
miniprogram/pages/index/index.ts
+1 -24
View File
@@ -1,28 +1,5 @@
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',
},
],
},
data: {},
tapCard(e: WechatMiniprogram.TouchEvent) {
const { url } = e.currentTarget.dataset;
miniprogram/pages/index/index.wxml
+17 -10
View File
@@ -1,12 +1,19 @@
<!--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>
<scroll-view class="page-container" scroll-y type="list">
<view class="wrapper">
<text class="wrapper-title">设置文字和颜色</text>
<word-input />
<view class="word-card-box">
<view class="word-card-list">
<word-card />
<word-card />
</view>
<view class="word-card-list">
<word-card />
<word-card />
</view>
</view>
</view>
<view class="wrapper">
<text class="wrapper-title">预览打印效果</text>
</view>
</scroll-view>