鸡汤来咯开发学习笔记-4

前端 · 2024-06-23

1.在head-vue中的homehead的样式加入以下代码,使得上面的背景颜色变成渐变色
创建一个从左上角开始的径向渐变。 //第二行同此
渐变的中心位于元素左上角的50%高度和200px宽度的位置。
渐变的起始颜色是#D5F8FC,然后渐变到透明。

background: 
    radial-gradient(50% 200px at left top,#D5f8fc,transparent),
    radial-gradient(50% 200px at  right top,#D3CBFC,transparent);

2.去官网下载导入uni-dateformat 日期格式化的组件到项目中,并重新启动hbuilder,并修改以前代码的年月日的空白如下,format代表具体格式取值当前时间,可以看官方插件文档

<view class="time">
            <view class="left">
                <uni-dateformat :date="Date.now()" format="dd"></uni-dateformat>
            </view>
            <view class="right">
                <view class="year">
                    <uni-dateformat :date="Date.now()" format="yyyy年MM月"></uni-dateformat>
                </view>
                
            </view>
        </view>

3.修改以前星期的空白部分:在utils中加入tool.js文件,并加入以下代码,再在head-vue中引用(先import {getWeekday} from"../../utils/tools.js"调用,然后再此项的view中加入{{getWeekday()}}

export function getWeekday() {  
const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];  
const date = new Date();  
const dayOfWeek = date.getDay();  
return days[dayOfWeek];  
 }  

注意加入export,公开函数,才能调用

鸡汤来咯
Theme Jasmine by Kent Liao