微信小程序列表组件的基本代码——列表组件

<form>
  <view class="shop">
    <label>商户名称</label>
    <input placeholder="请输入您的店铺名称"placeholder-style="text-align:left"></input>
  </view>
  <view class="shop">
    <label>商户电话</label>
    <input placeholder="请输入您的电话" placeholder-style="text-align:left"></input>
  </view>
  <view class="area">
    <label>所在地区</label>
    <view class="area_text" style=" color:{{color}}">
      <picker mode="region" bindchange="bindRegionChange"  value="{{region}}" custom-item="{{customItem}}">
        <view class="picker">
          {{region[0]}} {{region[1]}} {{region[2]}}
        </view>
      </picker>
      <view class="photo">
        <image src='/pages/image/rightrow.png'></image>
      </view>
    </view>

  </view>
  <view class="address">
    <label>详细地址</label>
    <view class="detailaddress">
      <view class="section">
        <textarea bindblur="bindTextAreaBlur" placeholder="请输入您的详细地址" auto-height />
      </view>
    </view>
  </view>
  <!-- 时间选择器 -->
  <view class="time"> 
      <label>营业时间</label>
      <view class="daytime">
          <view>周一到周日</view>
      </view>
      <view class="duantime">
      9:00-22:00
      </view>
      
  </view>
  
</form>
<view class="button" > <text>保存</text></view>

css代码

page {
  background: rgba(245, 245, 245, 1);
}

.shop:nth-child(1) {
  margin-top: 20rpx;
}

.shop {
  display: flex;
  flex-direction: row;
  height: 94rpx;
  background: rgba(255, 255, 255, 1);
  border-bottom: 2rpx solid rgba(245, 245, 245, 1);
}

.shop label {
  width: 30%;
  line-height: 94rpx;
  padding: 0 32rpx;
}

.shop input {
  width: 50%;
  height: 74rpx;
  margin: 10rpx;
  margin-left: 60rpx;
  
}
.area {
  height: 94rpx;
  background: rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: row;
  position: relative;
  border-bottom: 1px solid rgba(245,245,245,1);

}

.area label {
  width: 30%;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(48, 49, 51, 1);
  line-height: 94rpx;
  padding: 0 0 0 32rpx;
}

.picker{
 width: 100%;
 height: 100%;
}

.area .photo {
  width: 16rpx;
  height: 28rpx;
  padding: 28rpx 32rpx 33rpx 20rpx;
  position: absolute;
  top:-22rpx;
  right: 11rpx;
}
.area .photo image {
  width: 100%;
  height: 100%;
}
.area_text{
  height: 94rpx;
  /* background-color: red; */
  line-height: 94rpx;
  width: 70%;
  margin-left: 140rpx;
  font-size:30rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
}
.address{
   background: rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: row;
   border-bottom: 2rpx solid rgba(245, 245, 245, 1);
}
.address label{
  width: 30%;
  font-size:30rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(48,49,51,1);
line-height:42rpx;
padding: 26rpx 30rpx 26rpx 32rpx
}
.address  .detailaddress{
  width: 385rpx;
  padding-right: 30rpx;
  margin-left: 62rpx;
}
textarea{
  width: 100%;
  font-size:30rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(48,49,51,1);
line-height:36rpx;
 word-break:break-all;
padding: 26rpx 30rpx 27rpx 0;
}
.time{
  width: 750rpx;
  height: 94rpx;
background:rgba(255,255,255,1);
  display: flex;
  flex-direction: row;
}
.time label{
  font-size:30rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(48,49,51,1);
line-height:42rpx;
padding: 26rpx 0 26rpx 32rpx;
}
.time .daytime{
font-size:30rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(48,49,51,1);
line-height:94rpx;
margin-left: 200rpx;
}
.time  .duantime{
  font-size:30rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(48,49,51,1);
/* line-height:94px; */
margin-top: 30rpx;
margin-left: 12rpx;
}

/* 按钮 */
.button{
  width: 686rpx;
  height: 94rpx;
  background:linear-gradient(90deg,rgba(75,173,255,1) 0%,rgba(37,152,247,1) 100%);
  border-radius:4px;
  margin: 60rpx auto;
  text-align: center;
}
.button text{
  width:139px;
/* height:48px; */
display: inline-block;
/* background-color: red; */
margin-top: 23rpx;
  font-size:34rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
line-height:48rpx;
}

js方法

data: {
    region: ["请选择你的所在区地址"],
    color:"grey"
  },

  bindRegionChange:function (e) {
     var region=e.detail.value;
    this.setData({
      region:region,
      color:"black"
    })
      
    },

总结一下，以后可以直接粘贴复制