⼩程序列表组件的基本代码——列表组件
<form>
<view class="shop">
<label>商户名称</label>
<input placeholder="请输⼊您的店铺名称"placeholder-></input>
</view>
<view class="shop">
<label>商户电话</label>
<input placeholder="请输⼊您的电话" placeholder-></input>
</view>
<view class="area">
<label>所在地区</label>
<view class="area_text" >
<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 {
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); }
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"
})
},
总结⼀下，以后可以直接粘贴复制

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。