微信小程序旅游票价日历

最新推荐文章于 2023-12-27 10:07:57 发布

qq_38024300

最新推荐文章于 2023-12-27 10:07:57 发布

阅读量696

点赞数

文章标签：小程序

本文链接：https://blog.youkuaiyun.com/qq_38024300/article/details/100017726

版权

该博客介绍了如何利用微信小程序的wxml、wxss和js文件，开发一个展示旅游票价日历的应用。内容涵盖了前端界面布局、样式设计以及交互逻辑的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wxml

      <view style="position:fixed;bottom:540rpx;background:#F5F5F5;font-size: 30rpx; padding-top: 10rpx;padding-bottom: 10rpx;">
            <view class="layout-flex row" style="background-color: #F5F5F5;">
              <text class="date-week" style="width:{
  {systemInfo.windowWidth/7-15}}px;height:20px" wx:for="{
  {weekStr}}" wx:key="{                       {index}}">
                 <text wx:if="{
  {item !=='日' && item !=='六'}}">{
  {item}}</text>
              <text wx:if="{
  {item ==='日' || item ==='六'}}" class="week">{
  {item}}</text>
              </text>
            </view>
          </view>
          <view style="margin-top:50px"></view>
          <view wx:for="{
  {dateList}}" wx:key="{
  {index}}" wx:for-item="dateItem" style="padding-top:26rpx 0">
            <view class="date-year-month" style="text-align: center;font-size:35rpx;">{
  {dateItem.year}}年{
  {dateItem.month}}月</view>
            <view class="layout-flex row" style="flex-wrap: wrap;margin-top:30rpx;">
              <view class="date-day {
  {item.day<=0?'bgwhite':item.class}}" style="width:{
  {systemInfo.windowWidth/7-8}}px;height:{                      {systemInfo.windowWidth/7}}px;" data-year="{
  {dateItem.year}}" data-month="{
  {dateItem.month}}" data-day="{
  {item.day}}                    "
                bindtap="onPressDate" wx:for="{
  {dateItem.days}}" data-date="{
  {tictor1}}" wx:key="{
  {index}}">
                <view class='item-days'>
                  <text style='font-size:28rpx;'>{
  {item.day>0?(item.daytext?item.daytext:item.day):''}}</text>
                  <text style='font-size:30rpx;' wx:if="{
  {item.inday}}">
       
                   <!-- <text wx:if="{
  {mon==9&&day1==10}}">{
  {etcPrice}}</text> -->
                  <text >￥{
  {tictor1}}</text>
                  </text>

                </view>
              </view>
            </view>

          </view>

wxss

.spaceAroundCenter {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}

.box {
  margin: 30rpx;
}
 
.flex-item {
  /* flex-flow: nowrap;
  flex-grow: 1;
  flex-shrink: 1; */
  width: 14.2%;
}
 
.item-content {
  padding: 25rpx 0;
  text-align: center;
}
.item-content>text{
  display: block;
  font-size: 24rpx;
}
 /* 当前日期 */
.bk-col

最低0.47元/天解锁文章