小程序实现车型列表

创建一个新的小程序项目，选择模板为“空白”。

在 app.json 文件中添加页面路径和页面标题：

{
  "pages": [
    "pages/index/index",
    "pages/carList/carList"
  ],
  "window": {
    "navigationBarTitleText": "车型列表"
  }
}

在 pages 文件夹下创建一个名为 carList 的文件夹，并在该文件夹下创建 carList.wxml、carList.wxss、carList.js 和 carList.json 四个文件。

在 carList.wxml 文件中添加一个列表组件和一个搜索框组件：

<view class="container">
  <view class="search-box">
    <input class="search-input" placeholder="请输入车型名称" bindinput="onSearchInput" />
  </view>
  <scroll-view class="car-list" scroll-y="true">
    <view wx:for="{{carList}}" wx:key="index" class="car-item" bindtap="onCarTap">
      <image class="car-image" src="{{item.image}}" />
      <view class="car-info">
        <view class="car-name">{{item.name}}</view>
        <view class="car-price">{{item.price}}</view>
      </view>
    </view>
  </scroll-view>
</view>

在 carList.wxss 文件中添加样式：

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.search-box {
  padding: 10px;
}

.search-input {
  width: 100%;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}

.car-list {
  flex: 1;
  padding: 10px;
}

.car-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.car-image {
  width: 80px;
  height: 60px;
  margin-right: 10px;
  border-radius: 5px;
}

.car-info {
  flex: 1;
}

.car-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.car-price {
  font-size: 14px;
  color: #999;
}

在 carList.js 文件中添加数据和方法：

Page({
  data: {
    carList: [
      {
        name: '奥迪A4L',
        price: '28.8万起',
        image: 'https://img1.baidu.com/it/u=1747585477,3572386849&fm=26&fmt=auto&_