Loading... ### 效果图: ![image][1] ### js: ``` // 处理未来七天的函数 dealTime: function (num) { // num：未来天数 var time = new Date() // 获取当前时间日期 var date = new Date(time.setDate(time.getDate() + num)).getDate() //这里先获取日期，在按需求设置日期，最后获取需要的 var year = time.getFullYear() //获取年份 var month = time.getMonth() + 1 // 获取月份 var day = time.getDay() // 获取星期 switch (day) { // 格式化 case 0: day = "日" break case 1: day = "一" break case 2: day = "二" break case 3: day = "三" break case 4: day = "四" break case 5: day = "五" break case 6: day = "六" break } var obj = { // date: date, day: month + '.' + date, // month: month, week:day, date:year+'-'+month + '-' + date } return obj // 返回对象 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var arr = [] for (let i = 0; i < 7; i++) { arr.push(this.dealTime(i)) } // arr[0].day = '今天' this.setData({ weekInfo: arr // 赋值给data },()=>{ console.log(this.data.aWeek) }) //api_data(this); 请求接口 }, ``` ### wxml ``` <scroll-view scroll-x class=" nav bg-white" scroll-with-animation scroll-left="<ruby>scrollLeft}}" style="padding-left<rp> (</rp><rt>8rpx"> <view class="cu-item date-item {{index==DateTabCur?' Datecur':''</rt><rp>) </rp></ruby>" wx:for="<ruby>weekInfo}}" wx<rp> (</rp><rt>key="*this" bindtap="DatetabSelect" data-id="{{index</rt><rp>) </rp></ruby>" style="padding: 0px 8rpx;"> <view> {{item.day}}</view> <view class="weeks">{{item.week}}</view> </view> </scroll-view> ``` ### wxss ``` .nav .date-item { height: 166rpx; text-align: center; color: #9a9a9a; border: none; line-height: 78rpx; } .date-item .weeks { width: 70rpx; height: 70rpx; border-radius: 50%; background: #333333; text-align: center; line-height: 70rpx; color: white; /* margin-bottom: 5rpx; */ } .nav .date-item.Datecur .weeks { border: 4rpx solid red; color: #333333; background:white; } ``` [1]: https://www.huangshuxiu.com/usr/uploads/2022/11/899417340.png Last modification：November 12, 2022 © Allow specification reprint Like 如果觉得我的文章对你有用，请随意赞赏