创建组件

在根目录创建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. 指数函数在c语言实现

    指数很重要,比如有一些欧拉公式 #include "common.h" #include <stdio.h> #include <stdlib.h> #in ...

  2. Spring里面AOP的和IOC的理解

    1.Spring里面AOP的理解:https://www.cnblogs.com/hongwz/p/5764917.html例如日志功能.日志代码往往横向地散布在所有对象层次中,而与它对应的对象的核心 ...

  3. python3练习100题——056

    题目:画图,学用circle画圆形. 可以用turtle.circle画图. import turtle turtle.setup(0.6,0.6) turtle.pensize(3) turtle. ...

  4. react-native构建基本页面2---轮播图+九宫格

    配置首页的轮播图 轮播图官网 运行npm i react-native-swiper --save安装轮播图组件 导入轮播图组件import Swiper from 'react-native-swi ...

  5. java性能分析 - CPU飙高分析工具

    背景         有处理过生产问题的同学基本都能遇到系统忽然缓慢,CPU突然飙升,甚至整个应用请求不可用.当出现这种情况下,在不影响数据准确性的前提下,我们应该尽快导出jstack和内存信息,然后 ...

  6. JavaScript实现常见的数据结构

    使用JavaScript实现栈.队列.链表.集合等常见数据结构.可能会有点用? 水 栈(Stack) 实际上JavaScript的Array本身就具有栈和队列的特性,所以我们可以借助Array来实现它 ...

  7. smarty循环item命名规范

    使用smarty循环渲染数据时第二次循环item复制命名不规范 item=data 后面代码使用data会与后台返回数据冲突 {%foreach from=$data.bind_data key=ke ...

  8. 在阿里云IIS服务器上安装证书

    在IIS服务器上安装证书 您可将下载的阿里云SSL证书安装到IIS服务器上,使您的IIS服务器支持HTTPS安全访问. 一.前提条件 申请证书时需要选择 系统自动创建CSR. 申请证书时如果选择手动创 ...

  9. Spring boot unable to determine jdbc url from datasouce

    1. 首先删除 @EnableAutoConfiguration(exclude = {DataSourceAutoConfiguration.class}) 2. 在配置文件里添加完整的dataso ...

  10. IDEA please configure web facet first