Component
小程序组件的开发虽然不算难,但是对于初学者开发小程序,把页面的一些版块,分解成小程序组件,也并不是容易理解的事情。建议,刚开始可以不考虑做组件,把布局页面的功能都写在同一个页面,或者采用template方式,把内容多的页面,分开到几个模板页面。
组件Component的功能虽然很强大,但是要写一个公用性很强的组件,务必也是需要设置很多属性和封装很多的事件方法。当开发一个组件后,自己的文档资料一定要写清楚,要不然,回头再看组件时,很多时候并不理解当初为啥如此去实现组件的一些功能。
这里用Component来实现列表的一条记录,它有一个点击记录打开的url属性和方法
一个数据属性,特别简单的组件。
js文件部分:
// kbwdl_piaopiaozu/pages/components/houseItem/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
item:{
type: Object,
value: {}
},
linkurl:{
type: String,
value:""
}
},
options: {
styleIsolation: 'apply-shared'
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
onLinkurl : function(e){
const self = this;
wx.navigateTo({
url: self.data.linkurl +"?id="+ self.data.item.id,
})
}
}
})
wxml文件部分:
<view class="cuitem">
<view bindtap="onLinkurl">
<view class="imgbd cu-avatar "
style="background-image:url({{item.thumb}});"> </view>
</view>
<view class="content">
<view class="htitle">
<view class="" bindtap="onLinkurl">
<text> {{item.title}} </text>
<text wx:if="{{item.istop==1}}" class="cu-tag bg-yellow">顶</text>
</view>
</view>
<view wx:if="{{item.rent_type==2}}" class="htags flex flex-wrap">
<view class="cu-tag ">{{item.quan}}</view>
<view class="cu-tag ">{{item.danyuan}}</view>
<view class="cu-tag ">{{item.room_label}}</view>
<view class="cu-tag ">{{item.donner_sur_lable}}</view>
<view class="cu-tag "> {{item.publish_name}}</view>
<view class="cu-tag">{{item.superficie}}平方尺</view>
<view class="cu-tag ">
<text class="icon-attention lg"></text>
<text class="">{{item.onclick}}</text></view>
<view class="cu-tag">
<text class="icon-favorfill lg"></text>
<text class="">{{item.fav_num}}</text>
</view>
</view><!--htags 租房end-->
<view class="desclabel" wx:if="{{item.rent_type==1}}">
<text class="text-gray htags">{{item.desc_label}}</text>
</view>
<view wx:if="{{item.rent_type==1}}" class="htags flex flex-wrap">
<view class="cu-tag ">{{item.house_type}}</view>
<view class="cu-tag ">{{item.firstpay}}</view>
</view><!--htags 二手信息 end-->
<view class="hprice flex">
<text class="tprice"> {{item.loyer_label}} </text>
<text class="time"> {{item.add_time_label}}</text>
</view>
</view>
</view><!--cuitem-->
wxss文件部分:
.imgbd{
width: 240rpx;
height: 210rpx;
border-radius: 10rpx;
}
.htitle{
font-size: 30rpx;
color: #222;
margin-bottom: 10rpx;
word-wrap: break-word ;
}
.htitle .ellipsisone{
width: 420rpx;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.content{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 0;
flex: 2;
margin-left: 20rpx;
}
.htags{
color: #444;
margin-bottom: 10rpx;
line-height: 55rpx;
}
.cu-tag{
height: 40rpx;
padding: 0 8rpx;
margin: 10rpx 0;
margin-right:10rpx;
color: #444;
}
.cu-tag+.cu-tag{
margin-left: 0;
}
.tprice{
font-weight: bold;
color: #E7A759;
}
.hprice{
justify-content: space-between;
}
.time{
color: #999;
}
.desclabel{
height: 40rpx;
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
}
.desclabel .htags{
line-height: 40rpx;
}
json文件部分:
{
"component": true,
"usingComponents": {}
}
上面4个文件组成小程序一个Component组件的所有构成页面;
然后,来看看在调用组件的地方,如何把属性和方法 实现。
<view class="hboxItems culist">
<code wx:for="{{houselist}}" wx:key="key">
<houseitem linkurl="../house/show" item="{{item}}"></houseitem>
</code>
</view>
在列表的wxml页面,把列表数据进行for循环,然后把 item 对象传递给组件, linkurl 点击打开的页面
在列表的json页面:
"usingComponents": { "houseitem": "/kbwdl_piaopiaozu/pages/components/houseItem/index"},
usingComponets 这个属性一定需要设置,它可以设置在引用组件的页面的json里,也可以在全局的app.json文件里面写。写在全局app.json有个方便的地方,就是写一次,在任何页面引用组件时,都不需要再单独写。 对于大量使用的组件,写在app.json文件,对于只被一个文件单独用的组件,建议写在对于页面的json文件内。
好了本文内容全部完毕,感谢您的阅读,希望对您有所帮助!