微信小程序封装组件--列表

最新推荐文章于 2024-07-09 22:53:52 发布

原创最新推荐文章于 2024-07-09 22:53:52 发布 · 1.6k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

微信小程序同时被 2 个专栏收录

20 篇文章

订阅专栏

知识点

9 篇文章

订阅专栏

本文展示了如何在微信小程序中实现组件化开发，通过`list.json`、`list.js`、`list.wxml`和`list.wxss`创建了一个列表组件，并在`index.js`中传入数据。组件支持多slot功能，点击列表项可以触发详细页跳转，详细展现了数据绑定、事件处理和样式设计的过程。

在这里插入图片描述

1，准备子组件–列表

// list.josn
{
  "component": true
}

// list.js
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  //接收父组件的参数
  properties: {
    list: {            
      type: Array,      
      value: []     
    },
  },

//组件的方法列表
  methods: {
    toDetail(e){
      console.log(e.currentTarget.dataset.index)
    },
  }
})

// list.wxml
<!--pages/modal/index.wxml-->
<view class="bd-radius" wx:if='{{list.length>0}}' >
  <view class='course-list row course-spance' wx:for='{{list}}' wx:for-item='item' wx:key='index' data-index='{{index}}' bindtap="toDetail">
    <view class="course-img">{{item.img}}</view>
    <view class="course-right column">
      <view>{{item.title}}</view>
      <view class="text">{{item.tec}}</view>
      <view class="row">
        <view>{{'￥'+item.price}}</view>
        <view>{{item.num+'人阅读'}}</view>
      </view>
    </view>
  </view>
</view>

// list.wxss
.bd-radius{
  border-radius: 20rpx;
  margin: 20rpx 20rpx 0;
  background-color: #fff;
}
.course-spance{
  margin: 0rpx 10rpx;
  padding: 20rpx 10rpx 40rpx;
  border-bottom: 1rpx solid #efefef;
}
.row{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.course-img{
  width: 300rpx;
  height: 150rpx;
  background-color: orange;
  border-radius: 20rpx;
}
.course-right{
  margin:0 30rpx;
  flex:1
}
.column{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.text{
  font-size: 22rpx;
  color: grey;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

2，使用

// index.josn 引入
{
 "usingComponents": {
   "courseList":"/components/list/list"
  },
}

// index.wxml 使用
<courseList list='{{courseList}}'></courseList>

//index.js  传数据
Page({
  data: {
   courseList:[
      {
        img:'图一',
        title:'标题文字一',
        tec:'玛丽',
        price:'19.9',
        num:209
      },
      {
        img:'图二',
        title:'标题文字二',
        tec:'沈腾,百亿影帝，真正的实力派，幽默风趣，当年军艺的校草，可是风姿已是往事,牛牛牛牛牛',
        price:'19.9',
        num:194
      },
      {
        img:'图三',
        title:'标题文字三',
        tec:'艾伦',
        price:'9.9',
        num:312
      },
    ]
  },
 })