创建组件

在根目录创建components目录,然后创建列表组件

组件中内容

<view class="prolist">
    //循环prolist列表
<view class="proitem" data-proid="{{item.proid}}" bindtap="toDetail" wx:for="{{prolist}}" wx:key="item.proid">
<view class="itemimg">
<image src="{{item.proimg}}"></image>
</view>
<view class="iteminfo">
<view class="title">{{item.proname}}</view>
<view class="price">¥{{item.price}}</view>
</view>
</view> </view>
/* component/prolist/proplist.wxss */
/* .ul .li {
height: 50px;
} */
.prolist{
position: relative;
}
.prolist .proitem {
width: 100%;
height: 100px;
display: flex;
box-sizing: border-box;
/* 如果是网页开发 需要写一个物理像素 */
border-bottom:1rpx solid #ccc;
}
/* gulp */
.prolist .proitem itemimg {
width:100px;
height: 100px; } .prolist .proitem .itemimg image {
width: 90px;
height: 90px;
border: 1px solid #ccc;
margin: 5px;
}
.prolist .proitem .iteminfo{
flex:1;
padding: 3px 5px;
}

在组件属性列表中接收,在组将方法中完成跳转页面

// component/prolist/proplist.js
Component({
/**
* 组件的属性列表
*/
properties: {
prolist: Array
}, /**
* 组件的初始数据
*/
data: {
// Aarry:[]
}, /**
* 组件的方法列表
*/
methods: {
toDetail (event) {
console.log("去详情页面",event)
// const { proid } = event.currentTarget.dataset
const { currentTarget: { dataset:{proid}}}=event
//如果跳转的是tab页面可以使用 switchTsb 或者 reluanch
//如果跳转的是非tab页面 使用redirectTo或者 navigateTo reluanch wx.navigateTo({
url: `/pages/detail/detail?proid=${proid}`,
}) // wx.redirectTo({
// url: `/pages/detail/detail?proid=${proid}`,
// }) // wx.reLaunch({
// url: `/pages/detail/detail?proid=${proid}`
// })
}
}
})

引入组件

a:在父组件index.wxml中引入组件

<prolist prolist="{{prolist}}"></prolist>

b:在index.json中注册组件

{
"navigationBarBackgroundColor": "#ff4001",
"navigationBarTitleText":"首页",
"navigationBarTextStyle":"white",
"backgroundColorTop":"#efefef",
"enablePullDownRefresh": true,
"onReachBottomDistance":50,
"disableScroll":false, "usingComponents": {
"prolist":"/component/prolist/proplist"
}
}

完成图

微信小程序 (组件的使用)的更多相关文章

  1. 微信小程序组件设计规范

    微信小程序组件设计规范 组件化开发的思想贯穿着我开发设计过程的始终.在过去很长一段时间里,我都受益于这种思想. 组件可复用 - 减少了重复代码量 组件做为抽离的功能单元 - 方便维护 组件作为temp ...

  2. 微信小程序组件学习 -- 注册页面

    微信小程序组件使用手册地址: 1. 百度搜索"微信公众平台",扫码登录之后,点击帮助文档里面的普通小程序. 2. 接着选择"开发"-->"组件& ...

  3. 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...

  4. 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...

  5. 详解封装微信小程序组件及小程序坑(附带解决方案)

    一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...

  6. 微信小程序组件通信

    父子通信 在子组件的对应js中 properties:{ prop名字:数据类型, prop名字:{ type:数据类型, value:默认值 } } 在父组件的wxml模板中找到子组件标签 < ...

  7. 微信小程序组件化实践

    Do Not Repeat Yourself 如何提高代码质量,方法有许多:抽象.模块.组件化,我认为它们的中心点都是--Do Not Repeat Yourself. 小程序组件化 我们先看看小程序 ...

  8. 微信小程序——组件(二)

    在上篇文章组件(一)里已经讲解了如何创建一个项目,现在继续...讲解一个页面布局以及各个组件的使用.在学习过程中,发现小程序支持flex布局,这对于学习过react native的人来说太好了,布局方 ...

  9. 微信小程序组件解读和分析:六、progress进度条

    progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...

  10. 微信小程序组件解读和分析:五、text文本

    text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <v ...

随机推荐

  1. 设置 myeclipse 编码格式

    参考网址:https://jingyan.baidu.com/article/77b8dc7fc6e1626174eab6bb.html

  2. A*模板(求K短路)(POJ2449)

    A*是bfs的优化,IDA*是dfs的优化 A*算法: 为启发式算法中很重要的一种,被广泛应用在最优路径求解和一些策略设计的问题中.而A*算法最为核心的部分,就在于它的一个估值函数的设计上: f(n) ...

  3. div中宽高度自适应文字换行居中问题解决

    <html> <head> <meta charset="UTF-8"/> <title>div中宽高度自适应文字换行居中demo& ...

  4. 禁止PotPlayer自动添加同一目录内连续文件

    问题描述 默认情况下PotPlayer会自动向播放列表添加相似文件 统一目录下大量连续文件会被同时加载 解决办法 参数选项-基本-基本设置-相似文件策略 设置为仅打开选定的文件

  5. JS编解码与Java编解码的对应关系

    最近前段在导出数据时会遇到“illegal character”的异常错误,结果发现是在请求地址中请求参数包含了空白字符(其编码为%C2%A0)或者是空格字符(其编码为%20),之前对空格字符情况是做 ...

  6. windows系统使用sketch设计的设计稿

    由sketch设计的文件因为没有windows系统的sketch所以无法使用windows系统的电脑打开,那么怎么办呢?可以借助zeplin, 通过sketch(mac电脑)上传到zeplin账号,然 ...

  7. 关于springboot连接数据库失败时,系统报错 MySQL:The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents .....

    起初在遇到这个问题时,当然知道是怎么回事,但因为是新手,也不知道怎么处理... 百度了下,发现网上很多攻城狮们都是在mysql的命令行界面处理. 先输入命令:show variables like ' ...

  8. java面试记录一:跳表、判断二叉树相同、冒泡排序、cookie和session的区别、设计模式(单例、工厂、模板方法、原型、代理、策略)、抽象类与接口的区别

    1.什么是跳表? 跳表实际上就是多层链表 跳表可用在让链表的元素查询接近线性时间 代码结构及java实现参考博客园随笔 2.判断两棵二叉树是否相同?(结构相同,内容相同) 思路:(1)先定义树节点Tr ...

  9. LaTeX绘图

    http://math.uchicago.edu/~weinan/programs/tex_diagrams/diagrams.html 给大家分享下这个,用鼠标画diagrams,然后可以一键复制l ...

  10. 利用MongoDB进行地理坐标查询

    BS的应用在生活中已经非常常见,我们打车,叫外卖,查个地图之类的都会查询附近的相关坐标位置,mongodb提供了原生的二维地图查询,极大地方便了大家的开发. 假定我们有一个定义了位置信息的集合loca ...