<view class="calendar-days-item {{item.type}}" bindtap="selectDate" data-date="{{item.date}}" style="background-color: {{item.selected ? 'lightblue' : ''}}">{{item.day}}</view>
时间: 2023-09-13 11:12:53 浏览: 28
这是一个小程序中的 WXML 代码,用于展示一个日历中的某一天,其中包括日期、日期对应的星期几、以及选中状态。其中,`{{item.type}}`是一个变量,用于控制该天的样式类型,`{{item.date}}`是该天的具体日期信息,`{{item.selected}}`则是判断该天是否被选中的变量。最后,`bindtap="selectDate"`用于绑定该天被点击时的事件处理函数,`data-date="{{item.date}}"`则是将该天的日期信息传递给事件处理函数。
相关问题
<scroll-view class="container" scroll-y="true" wx:if="{{hidden==false}}"> <block wx:for="{{orderList}}" wx:key=""> <view class="orderList"> <view class="order-title"> <view class="order-title-restaurantName"> {{item.canteen}}</view> <view class="order-title-state" wx:if="{{item.type==0}}">堂食</view> <view class="order-title-state" wx:else>打包</view> </view> <view class="order-content"> <image class="order-content-restaurantImg" src="https://www.zzyqzs.com/static/upload/image/20220301/1646118325920051.jpg"></image> <view class="order-content-info"> <view class="order-content-info-price">¥ {{item.money}}</view> <view class="order-content-info-date"> {{item.date}}</view> <view class="order-content-info-howToDistribute"> 由 山东农业大学 提供服务</view> </view> </view> <view class="order-footer"> <view class="order-footer-orderAgain" bindtap="sel1" data-dorderuid="{{item.id}}">评论</view> <view class="order-footer-orderAgain" bindtap="sel" data-dorderuid="{{item.d_id}}">查看详情</view> <view class="order-footer-orderAgain" bindtap="zl" data-canteen="{{item.canteen}}">再来一单</view> </view> </view> </block> </scroll-view>
这是一个小程序的代码,其中使用了微信小程序的组件和指令。其中使用了一个scroll-view组件来实现滚动视图的效果,wx:if指令用于控制是否显示该组件。在scroll-view中使用了一个block和wx:for指令来循环渲染订单列表,使用了{{}}绑定数据。每个订单项包括餐厅名称、订单类型、订单内容等,并且每个订单项都有一个订单底部操作栏,可进行评论、查看详情、再来一单等操作。
<view class="order-container"> <view class="order-header">订单信息</view> <view class="order-info"> <view class="info-item">订单编号:{{order.orderNo}}</view> <view class="info-item">订单金额:{{order.amount}}元</view> <view class="info-item">下单时间:{{order.createTime}}</view> <view class="info-item">收货地址:{{order.address}}</view> </view> <view class="order-header">订单商品</view> <view class="order-goods"> <block wx:for="{{order.goodsList}}" wx:key="index"> <view class="goods-item"> <view class="goods-img"> <image src="{{item.imgUrl}}"></image> </view> <view class="goods-info"> <view class="info-title">{{item.title}}</view> <view class="info-price">{{item.price}}元</view> <view class="info-amount">x{{item.amount}}</view> </view> </view> </block> </view> <button class="pay-btn" bindtap="onPay">去支付</button> </view>的样wxss
.order-container {
padding: 20rpx;
}
.order-header {
font-size: 28rpx;
margin-bottom: 20rpx;
}
.order-info {
margin-bottom: 40rpx;
}
.info-item {
font-size: 26rpx;
margin-bottom: 20rpx;
}
.order-goods {
margin-bottom: 40rpx;
}
.goods-item {
display: flex;
margin-bottom: 30rpx;
}
.goods-img {
width: 200rpx;
height: 200rpx;
margin-right: 20rpx;
}
.goods-img image {
width: 100%;
height: 100%;
}
.goods-info {
display: flex;
flex-direction: column;
}
.info-title {
font-size: 28rpx;
margin-bottom: 10rpx;
}
.info-price {
font-size: 26rpx;
margin-bottom: 10rpx;
}
.info-amount {
font-size: 26rpx;
}
.pay-btn {
width: 100%;
height: 80rpx;
background-color: #ff9900;
color: #fff;
font-size: 32rpx;
border: none;
border-radius: 5rpx;
text-align: center;
line-height: 80rpx;
cursor: pointer;
}
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)