今天日期（js）

Evelyn2017 · Mar 15, 2019 · 0917477 · 0917477
1 parent 70e3c45
commit 0917477
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 2 deletions.
diff --git a/icons/arrow-icon.png b/icons/arrow-icon.png
diff --git a/pages/index/index.js b/pages/index/index.js
@@ -19,7 +19,9 @@ Page({
     nowTemp: 14,
     nowWeather: "多云",
     nowWeatherBackground: '',
-    forecast:[]
+    forecast:[],
+    todayTemp:"",
+    todayDate:""
   },
   onPullDownRefresh(){
     this.getNow(()=>{
@@ -40,6 +42,7 @@ Page({
         let result = res.data.result
         this.setNow(result)
         this.setHourlyWeather(result)
+        this.setToday(result)
       },
       complete: ()=>{
         callback && callback()
@@ -80,5 +83,12 @@ Page({
     this.setData({
       hourlyWeather: hourlyWeather
     })
+  },
+  setToday(result){
+    let date = new Date()
+    this.setData({
+      todayTemp: `${result.today.minTemp}˚ - ${result.today.maxTemp}˚`,
+      todayDate: `${date.getFullYear()} - ${date.getMonth() + 1} - ${date.getDate()} 今天`
+    })
   }
 })
diff --git a/pages/index/index.wxml b/pages/index/index.wxml
@@ -1,10 +1,15 @@
 <view class='weather-wrapper'>
   <view class="temp">{{nowTemp}}</view>
   <view class="weather">{{nowWeather}}</view>
-
   <image class="weather-bg" 
   src="{{nowWeatherBackground}}"
   mode="scaleToFill"></image>
+  <view class='day-weather'>
+    <view class='day-text'>{{todayDate}}</view>
+    <view class='temp-text'>{{todayTemp}}</view>
+    <image class='arrow-icon'
+           src='/icons/arrow-icon.png'></image>
+  </view>
 </view>
 
 <view class="timetips">

diff --git a/pages/index/index.wxss b/pages/index/index.wxss
@@ -62,4 +62,26 @@
   margin-top: 46rpx;
   font-size: 40rpx;
   line-height: 56rpx;
+}
+.day-weather{
+  display: flex;
+  align-items: center;
+  position: absolute;
+  bottom: 0;
+  left: 40rpx;
+  right: 40rpx;
+  height: 90rpx;
+  border-top: 1px solid rgba(0,0, 0, 0.1);
+  font-size: 30rpx;
+  line-height: 42rpx;
+  opacity: 0.5;
+}
+.temp-text{
+  flex-grow: 1;
+  padding-right: 30rpx;
+  text-align: right;
+}
+.arrow-icon{
+  width: 13rpx;
+  height: 24rpx;
 }