微信小程序自定义组件components(代码详解) - CSDN文库

微信小程序组件

小程序组件

38 浏览量更新于2023-05-11 收藏 70KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

微信小程序自定义组件微信小程序自定义组件components(代码详解代码详解)

主要介绍了微信小程序自定义组件components知识，本文通过实例代码给大家介绍的非常详细，具有一定的参

考借鉴价值,需要的朋友可以参考下

在写小程序代码的时候，我们发现经常有一段代码我们经常敲，经常使用某一自定义组件，例如商城首页的轮播图和商品详情

页的商品展示栏是近乎相同的代码；微信小程序里的弹窗提示可以使用在多个地方…

小程序自定义组件小程序自定义组件

找到components目录，没有就新建

在compoents目录里新建一个用于存放代码的目录（下面用g-swiper表示）

在g-swiper目录里新建Compoent(名字自取)，新建后会和新建Page时一样自动生成四个页面文件（g-swiper.wxml g-

swiper.wxss g-swiper.js g-swiper.json）

轮播图实例轮播图实例

<g-swiper list="{{imageList}}" g-class="swiper"/>

在index.wxml里只需要这简短一行代码就能实现一个轮播图组件

json声明声明

要想使用组件必先声明，在index.json里声明组件名称和地址

{

"usingComponents": {

"g-swiper":"/components/g-swiper/g-swiper"

}

}

在组件的json也必须的声明，g-swiper.json（下面代码直接复制报错请将注释删掉）

{

"component": true, // 自定义组件声明

"usingComponents": {} // 可选项，用于引用别的组件

}

wxml和和wxss

wxml和wxss里的代码跟普通页面里的代码没什么区别

g-swiper.wxml代码

<swiper class="g-class" circular autoplay interval='3000' duration='300' indicator-dots indicator-active-color='#fffff'>

<block wx:for="{{list}}" wx:key="{{index}}">

<swiper-item class="swiper-item">

<image src="{{item}}"/>

</swiper-item>

</block>

</swiper>

g-swiper.wxss代码

.swiper-item image{

width:100%;

height:100%

}

js

js代码和普通页面js代码有所不同，这里是用Component包起来的而不是被Page包起来的

js代码

Component({

externalClasses:["g-class"],

properties: {

list:{

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38582909

粉丝: 5
资源: 975

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈