这里是文章模块栏目内容页
用小程序Componet组件实现列表一条记录的组件功能

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文件内。


好了本文内容全部完毕,感谢您的阅读,希望对您有所帮助!

更多栏目
相关内容