【微信小程序开发】自定义组件以及页面布局设计

🥳🥳Welcome Huihui's Code World ! !🥳🥳

接下来看看由辉辉所写的关于小程序的相关操作吧

目录

🥳🥳Welcome Huihui's Code World ! !🥳🥳

一.自定义组件的使用步骤(附实例)

1.创建自定义组件

2.在wxml中制定组件模板

3.wxss中给模板设计样式

4.js中定义组件的属性

5.定义组件的相关事件

6.在其他页面中使用组件

二.个人中心的布局实现

wxml

wxss

效果预览

三.投票的布局设计 

wxml

wxss

js

效果预览


一.自定义组件的使用步骤(附实例)

1.创建自定义组件

但我们如果使用的是最新版的微信开发工具,那么在我们新建了自定义组件之后,会出现一个错误

这个是因为它在过滤检查文件,如何可能会出现错误,为了不干扰我们的开发,我们需要在project.config.json中写两行代码

"ignoreDevUnusedFiles": false,
"ignoreUploadUnusedFiles": false,

2.在wxml中制定组件模板

<!--components/tabs/tabs.wxml-->
<view class="tabs"><view class="tabs_title"><view wx:for="{{tabList}}" wx:key="id" class="title_item  {{index==tabIndex?'item_active':''}}" bindtap="handleItemTap" data-index="{{index}}"><view style="margin-bottom:5rpx">{{item}}</view><view style="width:30px" class="{{index==tabIndex?'item_active1':''}}"></view></view></view><view class="tabs_content"><slot></slot></view>
</view>

3.wxss中给模板设计样式

/* components/tabs/tabs.wxss */
.tabs {position: fixed;top: 0;width: 100%;background-color: #fff;z-index: 99;border-bottom: 1px solid #efefef;padding-bottom: 20rpx;
}.tabs_title {/* width: 400rpx; */width: 90%;display: flex;font-size: 9pt;padding: 0 20rpx;
}.title_item {color: #999;padding: 15rpx 0;display: flex;flex: 1;flex-flow: column nowrap;justify-content: center;align-items: center;
}.item_active {/* color:#ED8137; */color: #000000;font-size: 11pt;font-weight: 800;
}.item_active1 {/* color:#ED8137; */color: #000000;font-size: 11pt;font-weight: 800;border-bottom: 6rpx solid #333;border-radius: 2px;
}

4.js中定义组件的属性

5.定义组件的相关事件

// components/tabs/tabs.js
Component({/*** 组件的属性列表*/properties: {tabList:Object},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {handleItemTap(e){// 获取索引const {index} = e.currentTarget.dataset;// 触发 父组件的事件this.triggerEvent("tabsItemChange",{index})this.setData({tabIndex:index})}
}
})

6.在其他页面中使用组件

①在对应使用的界面的json中引用自定义组件

{"usingComponents": { "tabs":"/components/tabs/tabs"},"navigationBarTitleText": "会议"
}

②在使用组件的wxml页面中使用组件

<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">

③定义属性值

Page({/*** 页面的初始数据*/data: {tabs:['会议中','已完成','已取消','全部会议'],lists: [{'id': '1','image': '/static/persons/1.jpg','title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】','num':'304','state':'进行中','time': '10月09日 17:59','address': '深圳市·南山区'},{'id': '1','image': '/static/persons/2.jpg','title': 'AI WORLD 2016世界人工智能大会','num':'380','state':'已结束','time': '10月09日 17:39','address': '北京市·朝阳区'},{'id': '1','image': '/static/persons/3.jpg','title': 'H100太空商业大会','num':'500','state':'进行中','time': '10月09日 17:31','address': '大连市'},{'id': '1','image': '/static/persons/4.jpg','title': '报名年度盛事,大咖云集!2016凤凰国际论坛邀您“与世界对话”','num':'150','state':'已结束','time': '10月09日 17:21','address': '北京市·朝阳区'},{'id': '1','image': '/static/persons/5.jpg','title': '新质生活 · 品质时代 2016消费升级创新大会','num':'217','state':'进行中','time': '10月09日 16:59','address': '北京市·朝阳区'}],lists1: [{'id': '1','image': '/static/persons/1.jpg','title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】','num':'304','state':'进行中','time': '10月09日 17:59','address': '深圳市·南山区'},{'id': '1','image': '/static/persons/2.jpg','title': 'AI WORLD 2016世界人工智能大会','num':'380','state':'已结束','time': '10月09日 17:39','address': '北京市·朝阳区'},{'id': '1','image': '/static/persons/3.jpg','title': 'H100太空商业大会','num':'500','state':'进行中','time': '10月09日 17:31','address': '大连市'}],lists2: [{'id': '1','image': '/static/persons/1.jpg','title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】','num':'304','state':'进行中','time': '10月09日 17:59','address': '深圳市·南山区'},{'id': '1','image': '/static/persons/2.jpg','title': 'AI WORLD 2016世界人工智能大会','num':'380','state':'已结束','time': '10月09日 17:39','address': '北京市·朝阳区'}],lists3: [{'id': '1','image': '/static/persons/1.jpg','title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】','num':'304','state':'进行中','time': '10月09日 17:59','address': '深圳市·南山区'},{'id': '1','image': '/static/persons/2.jpg','title': 'AI WORLD 2016世界人工智能大会','num':'380','state':'已结束','time': '10月09日 17:39','address': '北京市·朝阳区'},{'id': '1','image': '/static/persons/3.jpg','title': 'H100太空商业大会','num':'500','state':'进行中','time': '10月09日 17:31','address': '大连市'},{'id': '1','image': '/static/persons/4.jpg','title': '报名年度盛事,大咖云集!2016凤凰国际论坛邀您“与世界对话”','num':'150','state':'已结束','time': '10月09日 17:21','address': '北京市·朝阳区'},{'id': '1','image': '/static/persons/5.jpg','title': '新质生活 · 品质时代 2016消费升级创新大会','num':'217','state':'进行中','time': '10月09日 16:59','address': '北京市·朝阳区'}]},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面显示*/onShow() {},tabsItemChange(e){let tolists;if(e.detail.index==1){tolists = this.data.lists1;}else if(e.detail.index==2){tolists = this.data.lists2;}else{tolists = this.data.lists3;}this.setData({lists: tolists})}
})

效果预览

二.个人中心的布局实现

wxml

<!--pages/ucenter/index/index.wxml-->
<!--pages/ucenter/index/index.wxml-->
<!-- <text>pages/ucenter/index/index.wxml</text> -->
<view class="userInfo"><image class="user-profile" src="/static/persons/1.jpg"></image><text class="user-name">用户登录</text><text class="user-click">修改</text>
</view>
<view class="item1"><view class="box1"><image src="/static/tabBar/sdk.png" class="box-icon"></image><text class="box-title">我主持的会议</text><text class="box-num">1</text><text class="box-click">></text></view><view class="box2"><image src="/static/tabBar/sdk.png" class="box-icon"></image><text class="box-title">我参与的会议</text><text class="box-num">1000</text><text class="box-click">></text></view>
</view><view class="item2"><view class="box1"><image src="/static/tabBar/sdk.png" class="box-icon"></image><text class="box-title">我发布的投票</text><text class="box-num">12</text><text class="box-click">></text></view><view class="box2"><image src="/static/tabBar/sdk.png" class="box-icon"></image><text class="box-title">我参与的投票</text><text class="box-num">100</text><text class="box-click">></text></view>
</view><view class="item3"><view class="box1"><image src="/static/tabBar/sdk.png" class="box-icon"></image><text class="box-title">消息</text><text class="boxs-click">></text></view><view class="box2"><image src="/static/tabBar/sdk.png" class="box-icon"></image><text class="box-title">设置</text><text class="boxs-click">></text></view>
</view>  

wxss

/* pages/ucenter/index/index.wxss */
.userInfo{height:100px;display: flex;border-bottom: rgb(235, 234, 234) solid 6px;
}
.user-profile{width: 80px;height: 80px;display: flex;align-items: center;
}
.user-name{font-weight: bolder;display: flex;align-items: center;margin-left: 20px;width: 450rpx;
}
.user-click{display: flex;align-items: center;color: lightgray;
}
.item1{/* /* display: flex; */border-bottom: rgb(235, 234, 234) solid 6px; 
}
.box1{height: 50px;display: flex;align-items: center;border-bottom: rgb(235, 234, 234) solid 1px; 
}
.box2{height: 50px;display: flex;align-items: center;
}
.box-icon{width: 50rpx;height: 50rpx;margin-right: 10px;
}
.box-title{}
.box-num{width: 20px;margin-left: 180px;
}
.box-click{margin-left: 20px;color: lightgray;
}.item2{/* /* display: flex; */border-bottom: rgb(235, 234, 234) solid 6px; 
}.boxs-click{margin-left: 282px;color: lightgray;
}

效果预览

三.投票的布局设计 

wxml

<!--pages/vote/list/list.wxml-->
<!-- <view class="food-button" bindtap="jumpToFoodPage"><image class="food-icon" src="../../../static/vote/totaldata-active.png"></image><text class="food-label">投票统计</text>
</view> --><view class="vote-button" bindtap="jumpToFoodPage"><block wx:for="{{myvotelist}}" wx:key="index"><view class="myvotes"><image class="vote-icon" src="{{item.img}}"></image><text class="vote-label">{{item.name}}</text></view></block><image class="vote-add" src="../../../static/vote/addvote.png"></image>
</view>

wxss

/* pages/vote/list/list.wxss */
.vote-button {display: flex;flex-direction: row;flex-wrap: wrap; /* 使元素在一行中超出容器宽度时自动换行 */
}
.myvotes{height: 430rpx;width: 360rpx;display: flex;flex-direction: row;align-items: center;}
.vote-icon {width: 360rpx;height: 240rpx;}.vote-label {width: 350rpx;align-self: flex-end; /* 将文字放在图标的正下方 */}
.vote-add{margin-left:270px;margin-top:35px;width: 120rpx;height: 120rpx;
}

js

// pages/vote/list/list.js
Page({/*** 页面的初始数据*/data: {myvotelist:[{index:1, name:'投票统计',img:'../../../static/vote/totaldata-active.png'},{index:3, name:'投票记录',img:'../../../static/vote/voterecords-active.png'},{index:2, name:'赞成人数',img:'../../../static/vote/yes-active.png'},{index:3, name:'反对人数',img:'../../../static/vote/no-active.png'},]},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

效果预览

好啦,今天的分享就到这了,希望能够帮到你呢!😊😊  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/161885.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Sandboxie+Buster Sandbox Analyzer打造个人沙箱

一、运行环境和需要安装的软件 实验环境&#xff1a;win7_x32或win7_x64 用到的软件&#xff1a;WinPcap_4_1_3.exe、Sandboxie-3-70.exe、Buster Sandbox Analyzer 重点是Sandboxie必须是3.70版本。下载地址&#xff1a;https://github.com/sandboxie-plus/sandboxie-old/blo…

制作linux系统内部yum源仓库

需求说明 制作内网linux系统yum源仓库&#xff0c;比较简单的方式就是添加系统镜像&#xff0c;此种yum配置方式可参考文章 https://blog.csdn.net/d1240673769/article/details/108477661 如果无法提供系统镜像&#xff0c;那该如何创建内网的yum源仓库呢&#xff1f;本文提…

HarmonyOS 音视频开发概述

在音视频开发指导中&#xff0c;将介绍各种涉及音频、视频播放或录制功能场景的开发方式&#xff0c;指导开发者如何使用系统提供的音视频 API 实现对应功能。比如使用 TonePlayer 实现简单的提示音&#xff0c;当设备接收到新消息时&#xff0c;会发出短促的“滴滴”声&#x…

JMeter 随机数生成器简介:使用 Random 和 UUID 算法

在压力测试中&#xff0c;经常需要生成随机值来模拟用户行为。JMeter 提供了多种方式来生成随机值&#xff0c;本文来具体介绍一下。 随机数函数 JMeter 提供了多个用于生成随机数的函数&#xff0c;其中最常用的是 __Random 函数。该函数可以生成一个指定范围内的随机整数或…

JAVA转GO

GO 环境配置 go环境 下载go并安装(win下),环境变量他自己要配置上 https://dl.google.com/go/go1.21.3.windows-amd64.msi 验证是否安装成功: //打开cmd go versionVSCODE环境 下载VSCODE…略 配置VSCODE的环境 下载插件 go开发工具包 打开cmd,或者VSCODE自带的终端,…

IDEA使用http client无法识别http-client.env.json的环境配置

http-client.env.json的配置 {"dev": {"baseUrl": "http://192.168.60.176:9160","accessToken": "eyJhbPNOQ"} }选择不到环境 问题原因&#xff1a; 安装了Alibaba Cloud Toolkit插件后&#xff0c;被Alibaba Cloud ROS …

[初始java]——java为什么这么火,java如何实现跨平台、什么是JDK/JRE/JVM

java的名言&#xff1a; ”一次编译、到处运行“ 一、编译语言与解释语言 编译&#xff1a; 是将整份源代码转换成机器码再进行下面的操作&#xff0c;最终形成可执行文件 解释&#xff1a; 是将源代码逐行转换成机器码并直接执行的过程&#xff0c;不需要生成目标文件 jav…

springboot 导出word模板

一、安装依赖 <dependency><groupId>com.deepoove</groupId><artifactId>poi-tl</artifactId><version>1.12.1</version></dependency>二、定义工具类 package com.example.springbootmp.utils;import com.deepoove.poi.XWP…

如何加入开源项目维护并提交代码?本地搭建源码阅读开发构建环境示例: kafka

如何加入开源项目维护并提交代码?本地搭建源码阅读开发构建环境示例: kafka。 大家对开源项目有兴趣、想成为committer,或者工作需要,会从github上获取最新的开源项目源码。本文做一个示例,怎样搭建本地的源码阅读、开发、构建环境。 首先,在github上找到项目的链接,…

Web架构安全分析/http/URL/Cookie攻击

Web 架构安全分析 Web 工作机制及基本概念 传统 Web 架构 LAMP 网页 概念 网页就是我们可以通过浏览器上网看到的精美页面&#xff0c;一般都是经过浏览器渲染过的 .html 页面&#xff0c;html 语言在浏览器中渲染。其中包含了CSS、JavaScript 等前端技术。通过浏览器访问…

ELK + Filebeat 分布式日志管理平台部署

ELK Filebeat 分布式日志管理平台部署 1、前言1.1日志分析的作用1.2需要收集的日志1.3完整日志系统的基本特征 2、ELK概述2.1ELK简介2.2为什么要用ELK?2.3ELK的组件 3、ELK组件详解3.1Logstash3.1.1简介3.1.2Logstash命令常用选项3.1.3Logstash 的输入和输出流3.1.4Logstash配…

ISR实现RDN图像增强

ISR实现RDN图像增强 图像增强作用ISR项目安装1.从PyPI安装ISR&#xff08;推荐&#xff09;&#xff1a;2.从GitHub源代码安装ISR&#xff1a; 用法预测大图像推理 训练创建模型 RDN算法介绍Residual Dense Network的结构残差稠密块&#xff08;Residual Dense Block&#xff0…

三款经典的轮式/轮足机器人讲解,以及学习EG2133产生A/B/C驱动电机。个人机器人学习和开发路线(推荐)

1&#xff0c;灯哥开源&#xff08;有使用指南&#xff0c;适合刚入门新手&#xff09; 机械部分&#xff1a;2个foc无刷电机 硬件和软件部分&#xff1a;没有驱动板子。只有驱动器&#xff0c;主控板esp32和驱动器通过pwm直接通讯。驱动器板子上有蓝色电机接口&#xff0c;直…

抓了几千万条热门股数据,用Python量化验证后发现结果竟然...... | 邢不行

在体育领域一直流传着大热必死的说法&#xff0c;历史上也不乏夺冠大热门爆冷出局的故事。 在金融领域也有大名鼎鼎的金融第三定律&#xff1a;热门的东西不要碰。 01 大热必死 针对这一定律&#xff0c;我们之前也写过相关的文章。 https://mp.csdn.net/mp_blog/creation/ed…

Linux性能优化--性能工具:特定进程内存

5.0 概述 本章介绍的工具使你能诊断应用程序与内存子系统之间的交互&#xff0c;该子系统由Linux内核和CPU管理。由于内存子系统的不同层次在性能上有数量级的差异&#xff0c;因此&#xff0c;修复应用程序使其有效地使用内存子系统会对程序性能产生巨大的影响。 阅读本章后&…

JS 通过年份获取月,季度,半年度,年度

​功能描述&#xff1a; 实例化一个函数&#xff0c;给函数内传递不同的参数&#xff0c;获取从起始年份到现在年度所有的月份&#xff0c;季度&#xff0c;半年度&#xff0c;年度 动态演示 ---------正文代码开始-------- 1. 封装函数 createMonth 注&#xff1a;此代码可…

流程图如何制作?好用的11款流程图软件盘点!

流程图是一种强大的可视化工具&#xff0c;用于清晰地展示各种过程和步骤&#xff0c;应用非常广泛&#xff0c;在各个行业中随处可见&#xff0c;凡是涉及流程步骤的场景&#xff0c;都可以用到流程图&#xff0c;那么问题来了&#xff1a;流程图如何制作&#xff1f; 这篇文…

第0章:怎么入手tensorflow

近年来人工智能的火爆吸引了很多人&#xff0c;网上相关的热门课程报名的人很多&#xff0c;但是坚持下去的人却少。那些晦涩的原理没有一定知识的积累很难能理解。 如果你对人工智能感兴趣&#xff0c;且想利用人工智能去实现某项功能&#xff0c;而不是对人工智能本身感兴趣&…

c语言练习90:反转链表

反转链表 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 与方法一相比方法二的思路更容易实现 报错原因&#xff1a;head和n3不能为空&#xff0c;为空则不能执行后面的操作 报错原因&#xff1a;listnode*n1,n2,n3; 纠正&#xff1a;listnode *n1…

Java】实现图片验证码2.0【详细代码】

实际开发过程中经常遇到要实现图片验证码来防止外部使用脚本刷接口&#xff0c;所以说图片验证码是很有必要的一个小功能。 下面这个之前发布的&#xff0c;现在发现生成的图片验证码是可以被自动化工具进行识别的&#xff0c;具有一定的安全性问题。 1.0版本验证码&#xff…