9----------------自定义组件

最新推荐文章于 2023-08-25 02:00:00 发布
最新推荐文章于 2023-08-25 02:00:00 发布
阅读量86 收藏
点赞数
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45448576/article/details/114013892
版权

1、创建与page同级的文件夹，自己随便起名
在这里插入图片描述
2、在Component下方创建文件夹，自定义起名在这里插入图片描述
3、在xsj下方 选择 新建 component

在这里插入图片描述

4、在.wxml中自定义内容，也可以在.wxss中设置样式

<view class="box">这是我们自己定义的组件</view>

.box{background:pink;}

5、在用到改组件的文件的 .json 中

加入组件路径

{
  "usingComponents": {
    "xsjsx":"/Component/xsj/xsj"
  }
}

6、在.wxml中就可以使用了

在这里插入图片描述

7、结果为

在这里插入图片描述

雨兮雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义组件
天空之外
09-27 899
什么是组件 组件（component）就是零件，将零件组装成想要的工具（页面）。 组件是Vue.js最强大的功能之一，它可以扩展HTML元素，封装可重用的代码，通过传入对象的不同，实现组件的复用。 使用组件的好处 组件是可以复用性的 易于维护 有封装性，易于使用 大型项目中降低组件之间重复性 全局组件 全局组件：在任何地方，任何方式，任何地点都可以使用的标签组件。 Vue.compon...
uni-app的自定义组件
qq_52904412的博客
08-03 5019
uni-app的自定义组件
uni-app自定义组件
月影神社
12-06 4426
1.在components新建文件helloComp.vue(名字自定义). 2.编写自定义组件。定义组件名称为helloComp(一定要和自己的文件名对应)，template里写入自定义组件的内容。具体看下图。 3.在需要使用组件的页面导入自定义组件。 4.最后在需要使用组件的位置直接使用即可。 ...
uni-app 自定义导航栏
最新发布
BradenHan的专栏
08-25 8397
在 uni-app 中，可以通过修改页面的导航栏配置来实现自定义导航栏的效果。以下是实现自定义导航栏的一般步骤：在 uni-app 项目中找到需要自定义导航栏的页面，例如 。在该页面的 标签中，添加一个自定义的导航栏组件，例如 。在 标签中，定义 组件，并在其中添加必要的属性和方法。可以使用 和其他基本组件来构建导航栏的布局。在 或 生命周期钩子中，通过 方法设置导航栏的标题。您可以从页面数据或组件的属性中获取标题信息。如果需要隐藏系统原生导航栏，可以通过 方法进行隐藏。请注意，这可能会导致
vue2自定义实现tag-input组件
11-24
vue2实现简单的tag-input标签输入框 支持： 1、限制输入类型，例如手机号码、邮箱等 2、删除tag 详细情况参考本篇文章： https://blog.csdn.net/weixin_43797046/article/details/127764764
simple-calendar.zip
08-06
类似于行事历. demo使用vue-cli搭建,下载后先cnpm install ,然后... . . 使用element-ui的滑动组件加上自定义div,, 一次加载七天,分上午和下午日程填写并在提交时校验.这个资源是本人亲自写了一整天,不是从别处down的.
react-reactscrollReact滚动组件
08-15
这个库提供了React组件，可以方便地控制页面的滚动行为，包括元素定位、平滑滚动以及自定义滚动条样式。下面将详细讨论React-Scroll的关键特性和使用方法。 首先，React-Scroll的核心组件主要有两个：`Link`和`...
discourse-search-banner
05-06
该组件可将搜索栏以及可选的标题和副标题文本放在Discourse社区的主要主题列表导航上方的横幅中。 默认情况下，此横幅显示在...自定义样式 HTML元素在出现此.display-search-banner任何位置都会得到一个名为.display-
hipsters-ponto-quiz
05-25
另外，我们使用NextJS自定义组件为样式组件设置了全局。 自己部署 使用部署示例： 如何使用 使用或执行以引导示例： npx create-next-app --example with-styled-components with-styled-components-app # or yarn...
2-----------案例一
qq_45448576的博客
03-09 8337
1、初始化 2、头部 index.wxss /**头部布局**/ .header{width:750rpx;height:90rpx;} .hdcon{display:flex;justify-content:space-between;align-items:center;height:100%;}/**两张图片放在一行**/ .hdcon navigator,.hdcon .kefu{height:50rpx;} .hdcon image{height:100%;} .kefu{position:re
微信小程序云开发调用 腾讯云AI 图像标签
qq_45448576的博客
03-09 1224
本白菜在开发微信小程序调用腾讯云AI图像标签产品时，遇到了问题，自己琢磨了三天，搜遍了能搜的东西，还是没有解决。下边记录一下 调用过程 1、首先进入https://cloud.tencent.com/document/api/865/35471 使用这个在线生成代码 2、在云函数目录下的index.js 中 // 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init({ env: "你的环境变量" }) （1)填入环境变量 (2)在云函数
1-------------基础课程
qq_45448576的博客
02-21 654
1、 .js，逻辑层； .json配置层； .wxss样式层。 ctrl+s编译运行 2、创建文件夹news 在app.json里，加入语句： { "pages":[ "pages/index/index", "pages/logs/logs", "pages/news/news"//路径 ], 3、图片 <image src="https://cn.bing.com/images/search?view=detailV2&ccid=67It
17---------------云开发更新云数据库的两种方法
qq_45448576的博客
02-25 520
1、通过id来指定到想要改的数据 .js updateData(){ db.collection("demolist").doc("1551b00560376b090025278b0c00b69e") .update({ data:{ author:"gyjugmng" } }) }, .wxml <button type="primary" bindtap="updateData">更新一条记录</butt
11-----------------数据接口，修改时间戳
qq_45448576的博客
02-25 270
在.js里 onLoad里写 1、 onLoad: function (options) { //发送网络请求获取真实的行业动态列表 wx.request({ url:'https://ku.qingnian8.com/school/list.php', success:res=>{ console.log(res.data) this.setData({ dataList:res.data }
19----------------云开发count个数与watch数据监听
qq_45448576的博客
02-26 230
1、count查询记录个数 .js //获取记录个数 btnNum(){ db.collection("demolist").count() .then(res=>{ console.log(res) }) }, .wxml <button type="primary" bindtap="btnNum">查询个数</button> 2、.watch监听,实时更新数据 onLoad: function (options) {
10--------------------内置页面
qq_45448576的博客
02-24 229
.wxml <!--PART ONE--> <!--头部--> <view class="header"> <view class="container hdcon"> <navigator open-type="switchTab" url="/pages/index/index" class="logo"> <image mode="heightFix" src="/images/logo.png">&...
12-----------------------通过ES6模块化公共函数
qq_45448576的博客
02-25 185
1、在utils下创建.js文件，注意不是文件夹 2、在里边编写函数 common是一个对象，最后一句话，是将这个对象返回， 里边有两个函数。 ONE：getStrLen:function(str,len) 这个是文章标题超过len个长度，后边就会变成省略号 TWO：getMyData:function(timestamp,formats) 这个是将时间戳转化为标准日期。 var common={ getStrLen:function(str,len){ if(str.length>le
16---------------------云开发提交表单添加到云数据库
qq_45448576的博客
02-25 170
.js //提交表单添加数据 btnSub(res){ //法一 var {title,author,content}=res.detail.value db.collection("demolist").add({ data:{ title:title, author:author, content:content } }) //法二 var res..

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值