微信小程序-自定义组件
2023-09-11 14:14:36 时间
自定义一个swiper轮播.
index
index.wxml
1 <!--logs.wxml-->
2 <swiperBanner Height="450rpx" imgList="{{banners}}" url="picUrl"></swiperBanner>
components文件夹中的swiper_banner/index
index.json
导入路径为上两层的components文件夹中的swiper_banner/index
components/swiper_banner/index.js
1 Component({
2 properties: {
3 imgList: {
4 type: Array,
5 value: [],
6 observer: function (newVal, oldVal) {
7 this.setData({
8 imgList: newVal
9 })
10 }
11 },
12 url:{
13 type:String,
14 value:''
15 },
16 Height:{
17 type:String,
18 value:''
19 },
20 Width:{
21 type:String,
22 value:''
23 }
24 }
25 })
components/swiper_banner/index.json
1 {
2 "component": true
3 }
components/swiper_banner/index.wxml
1 <view class='swiper'>
2 <swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000" style="height:{{Height}};">
3 <block wx:for="{{imgList}}" wx:key="prototype">
4 <swiper-item>
5 <image src="{{item[url]}}" class="slide-image" mode="aspectFill" />
6 </swiper-item>
7 </block>
8 </swiper>
9 </view>
components/swiper_banner/index.wxss
1 .swiper image{
2 width: 100%;
3 height: 100%;
4 }
1 {
2 "enablePullDownRefresh": true,
3 "backgroundColor": "#FB5D5D",
4 "onReachBottomDistance": 10,
5 "usingComponents": {
6 "swiperBanner": "../../components/swiper_banner/index"
7 },
8 "navigationBarTitleText": "log"
9 }
示例代码如下:点击获取
相关文章
- 微信小程序 - 上传图片(组件)
- 微信小程序 - 自适应swiper高度(非组件)
- 微信小程序 - 提示消息组件
- 【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
- 【微信小程序】-- 其它常用组件介绍 -- button & image(八)
- 【微信小程序】-- 常用视图容器类组件介绍 -- view、scroll-view和swiper(六)
- 微信小程序 - 实现文本展开与收起功能组件(初始时隐藏文字内容,当点击查看更多时展开)点击隐藏和点击显示 / 折叠与展开 / 大段文本内容过多,实现折叠与展开效果 ,超详细代码注释文章教程源码插件
- 微信小程序 - 父组件调用子组件的函数方法(像 Vue.js 中 ref 属性一样,直接 this.$refs.xx 获取子组件数据和方法)详细教程示例代码
- 微信小程序 - TDesign 组件库环境搭建(Windows)
- 微信小程序搜索框代码组件
- 微信小程序搜索框代码组件
- 微信小程序轮播组件
- 微信 小程序组件 循环
- 微信 小程序组件 轮播(原始)
- 微信 小程序组件 加入购物车全套 one js
- 微信小程序template模板与component组件的区别和使用
- 微信小程序~map组件z-index无效
- 微信小程序~基础组件
- 【微信小程序】view和scroll-view组件的基本使用
- 微信小程序原生开发功能合集十:分步组件的封装
- 微信小程序自定义组件的使用以及调用自定义组件中的方法
- 实现一个微信小程序组件:文字跑马灯效果
- 微信小程序开发入门与实战(组件生命周期)