微信小程序可滑动周日历组件使用详解-创新互联

微信小程序可滑动周日历组件，供大家参考，具体内容如下

创新互联专注于企业成都全网营销推广、网站重做改版、无锡网站定制设计、自适应品牌网站建设、HTML5、电子商务商城网站建设、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为无锡等各大城市提供网站开发制作服务。

看网上周日历组件比较少，自己弄了一个，和大家分享一下。

如果样式变形，请检查是否有共用样式起冲突

展示一下效果图

在components组件文件夹下新建calendarWeek文件夹

直接上代码吧：

index.wxml

<!--components/calendarWeek/index.wxml-->
<!-- 日历 -->
<view class="date-choose shrink border-bottom10">

 <picker mode="date" bindchange="tiaotime"><view class="data-month">{{dateYear}}{{dateMonth}}</view></picker>
 <swiper class="date-choose-swiper" circular="true" indicator-dots="{{false}}" current="{{swiperCurrent}}" bindchange="dateSwiperChange">
 <block wx:for="{{dateList}}" wx:for-item="date" wx:key="date.id">
 <swiper-item class="swiper-item">
 <view class="weekday">
 <block wx:for-item="weekday" wx:for="{{dateListArray}}" wx:key="{{index}}">
 <text class="week">{{weekday}}</text>
 </block>
 </view>
 <view class="dateday">
 <block wx:for="{{date.days}}" wx:for-item="day" wx:key="{{day.id}}">
 <!-- <view>{{day.ids}}</view> -->
 <view class="day" id="{{day.id}}" bindtap="chooseDate" >
 <text class="{{dateCurrentStr==day.id?'active':''}}{{today==day.id?' reds':''}}" >{{day.day}}</text>
 </view>
 </block>
 </view>
 </swiper-item>
 </block>
 </swiper>
</view>
<!-- 日历 -->

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站名称：微信小程序可滑动周日历组件使用详解-创新互联
本文地址：https://www.cdcxhl.com/article2/doedoc.html

成都网站建设公司_创新互联，为您提供品牌网站设计、网站收录、全网营销推广、网站设计公司、外贸建站、标签优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联