0612

pages/index/index.js

@@ -1,5 +1,6 @@
 //index.js
 //获取应用实例
+var imageUtil = require('../../utils/window.js'); 
 const app = getApp()
 
 Page({
@@ -9,47 +10,101 @@ Page({
     userInfo: {},
     hasUserInfo: false,
     canIUse: wx.canIUse('button.open-type.getUserInfo'),
+    imagewidth: 0,//缩放后的宽 
+    imageheight: 0,//缩放后的高 
     aa:[
       {
-        nickName:"wang",
-        reward:"2"
+        from:"Investing.com 中文",
+        nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手",
+        reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....",
+        time:"6天前"
+      },
+      { 
+        from:"chinese.aljazeera.net",
+        nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来",
+        reward: "波音公司当地时间27日宣布，将在美国裁减超1...",
+        time:"6天前"
       },
       {
-        nickName: "wang",
-        reward: "2"
+        from:"Investing.com 中文",
+        nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%",
+        reward: "Reuters.美股异动|波音(BA.US)737MAX客...",
+        time:"5天前"
       },
       {
-        nickName: "wang",
-        reward: "2"
+        from:"Investing.com 中文",
+        nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手",
+        reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....",
+        time:"6天前"
+      },
+      { 
+        from:"chinese.aljazeera.net",
+        nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来",
+        reward: "波音公司当地时间27日宣布，将在美国裁减超1...",
+        time:"6天前"
       },
       {
-        nickName: "wang",
-        reward: "2"
+        from:"Investing.com 中文",
+        nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%",
+        reward: "Reuters.美股异动|波音(BA.US)737MAX客...",
+        time:"5天前"
       },
       {
-        nickName: "wang",
-        reward: "2"
+        from:"Investing.com 中文",
+        nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手",
+        reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....",
+        time:"6天前"
+      },
+      { 
+        from:"chinese.aljazeera.net",
+        nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来",
+        reward: "波音公司当地时间27日宣布，将在美国裁减超1...",
+        time:"6天前"
       },
       {
-        nickName: "wang",
-        reward: "2"
+        from:"Investing.com 中文",
+        nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%",
+        reward: "Reuters.美股异动|波音(BA.US)737MAX客...",
+        time:"5天前"
       },
       {
-        nickName: "wang",
-        reward: "2"
+        from:"Investing.com 中文",
+        nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手",
+        reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....",
+        time:"6天前"
+      },
+      { 
+        from:"chinese.aljazeera.net",
+        nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来",
+        reward: "波音公司当地时间27日宣布，将在美国裁减超1...",
+        time:"6天前"
       },
       {
-        nickName: "wang",
-        reward: "2"
+        from:"Investing.com 中文",
+        nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%",
+        reward: "Reuters.美股异动|波音(BA.US)737MAX客...",
+        time:"5天前"
       },
       {
-        nickName: "wang",
-        reward: "2"
+        from:"Investing.com 中文",
+        nickName:"买入波音(BA.US)好时机？两个问题没解决之前劝你住手",
+        reward:"今年迄今，美股航空板块受到公共卫生事件的冲击.....",
+        time:"6天前"
+      },
+      { 
+        from:"chinese.aljazeera.net",
+        nickName: "波音裁员超1.2万人与警惕最坏时刻尚未到来",
+        reward: "波音公司当地时间27日宣布，将在美国裁减超1...",
+        time:"6天前"
       },
       {
-        nickName: "wang",
-        reward: "2"
+        from:"Investing.com 中文",
+        nickName: "美股异动|波音737MAX客机恢复生产，盘前涨逾5%",
+        reward: "Reuters.美股异动|波音(BA.US)737MAX客...",
+        time:"5天前"
       },
+      
+ 
     ],
 
   },
@@ -60,14 +115,14 @@ Page({
     })
   },
   onReady: function (e) {
-    this.computeScrollViewHeight();
+    // this.computeScrollViewHeight();
     // var query = wx.createSelectorQuery()
     // query.select('#test').boundingClientRect(function (res) {
     //    console.log(res.top);
     // }).exec();
 },
   onLoad: function () {
-    // this.computeScrollViewHeight();
+    this.computeScrollViewHeight();
     // if (app.globalData.userInfo) {
     //   this.setData({
     //     userInfo: app.globalData.userInfo,
@@ -96,8 +151,8 @@ Page({
     // }
   },
   computeScrollViewHeight() {
-    let that = this
-    let query = wx.createSelectorQuery().in(this)
+    var that = this
+    let query = wx.createSelectorQuery().in(that)
     query.select('.userinfo').boundingClientRect()
     query.select('.search').boundingClientRect()
     query.select('.news').boundingClientRect()
@@ -110,9 +165,16 @@ Page({
       let height = windowHeight - topHeight - searchHeight - titleHeight
       let ratio = 750 / windowWidth
       let scrollHeight = height * ratio - 50
-      this.setData({ scrollHeight: scrollHeight})
+      that.setData({ scrollHeight: scrollHeight})
     })
   },
+  imageLoad: function (e) { 
+    var imageSize = imageUtil.imageUtil(e) 
+    this.setData({ 
+     imagewidth: imageSize.imageWidth, 
+     imageheight: imageSize.imageHeight 
+    }) 
+   },
   getUserInfo: function(e) {
     console.log(e)
     app.globalData.userInfo = e.detail.userInfo

pages/index/index.wxml

@@ -6,7 +6,8 @@
       <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
       <text class="userinfo-nickname">{{userInfo.nickName}}</text>
     </block> -->
-    <image class="imageSize" src="{{url}}" mode="widthFix"></image>
+    <!-- <image class="imageSize" src="{{url}}" mode="widthFix"></image> -->
+    <image style="width: {{imagewidth}}px; height: {{imageheight}}px;" src="{{url}}" bindload="imageLoad"></image> 
   </view>
   <view class="search">
     <input class="weui-input" placeholder="请输入板块代码"/>
@@ -18,6 +19,7 @@
     <text class="news-today">今日快讯</text>
   </view>
   <view class="line">
+    1
   </view>
     <!-- <swiper class="tab-right"  id="test" vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items='6'>
       <view class="right-item">
@@ -32,11 +34,13 @@
       </view>
     </swiper> -->
     <!-- <scroll-view scroll-y style='height:500rpx' class="tab"> -->
-    <scroll-view scroll-y style='height: {{scrollHeight + "rpx"}}' class="tab">
+    <scroll-view scroll-y="true"  style='height: {{scrollHeight}}rpx' class="tab">
             <block wx:for-index="idx" wx:for='{{aa}}' wx:key="key">
             <view class='content-item'>
+              <text class='from' >{{item.from}}</text>
               <text class='name'>{{item.nickName}}</text>
-              <text class='wawa'>获得奖金{{item.reward}}元</text>
+              <text class='wawa'>{{item.reward}}</text>
+              <text class='time'>{{item.time}}</text>
             </view>
           </block> 
     </scroll-view>

pages/index/index.wxss

@@ -1,12 +1,12 @@
 /**index.wxss**/
 .userinfo {
   width:100%;
-  display: flex;
+  /* display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: center; */
 }
 .imageSize{
-  width: 100%;
+  width: 100%; 
 }
 .search{
   margin-top: -50rpx;
@@ -16,17 +16,19 @@
   align-items: center;
   width:90%;
   height: 80rpx;
-  display: flex;
-  flex-direction: row;
+  position: relative;
+  /* display: flex; */
+  /* flex-direction: row; */
   justify-content:space-between;
-  align-items: center;
 }
 .weui-input{
   margin-left: 30rpx;
   height: 100%;
 }
 .weui-search-bar__cancel-btn{
-  margin-right: 40rpx;
+  position: absolute;
+  top:20rpx;
+  right:20rpx;
 }
 .news{
   margin-top:20rpx;
@@ -73,22 +75,39 @@
 }
 .content-item {
   /* height: 50rpx; */
-  border-bottom: 1px solid #ede1d4;
+  border-bottom: 1rpx solid #ede1d4;
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  /* margin-bottom: 10rpx; */
+}
+.from{
+  font-size: 24rpx;
+  margin-left: 10rpx;
+  color: #999;
+  margin-top:10rpx;
 }
 .name {
-  font-size: 26rpx;
-  line-height: 100rpx;
-  color: #b0aaa9;
-  margin-left: 20rpx;
-  width: 40%;
+  font-size: 30rpx;
+  /* line-height: 100rpx; */
+  color: #fff;
+  margin:10rpx;
+  width: 100%;
   height:100%;
   overflow: hidden;
 }
 .wawa {
-  font-size: 26rpx;
-  float: right;
-  line-height: 100rpx;
-  margin-right: 20rpx;
+  font-size: 24rpx;
+  margin-left:10rpx;
+  /* float: right; */
+  /* line-height: 100rpx; */
+  /* margin-right: 20rpx; */
+  color: #999;
+}
+.time{
+  font-size: 24rpx;
+  margin-left:10rpx;
   color: #999;
+  margin-top:10rpx;
+  margin-bottom: 10rpx;
 }

utils/window.js

@@ -0,0 +1,38 @@
+//util.js 
+function imageUtil(e) { 
+  var imageSize = {}; 
+  var originalWidth = e.detail.width;//图片原始宽 
+  var originalHeight = e.detail.height;//图片原始高 
+  var originalScale = originalHeight/originalWidth;//图片高宽比 
+  console.log('originalWidth: ' + originalWidth) 
+  console.log('originalHeight: ' + originalHeight) 
+  //获取屏幕宽高 
+  wx.getSystemInfo({ 
+   success: function (res) { 
+    var windowWidth = res.windowWidth; 
+    var windowHeight = res.windowHeight; 
+    var windowscale = windowHeight/windowWidth;//屏幕高宽比 
+    console.log('windowWidth: ' + windowWidth) 
+    console.log('windowHeight: ' + windowHeight) 
+    if(originalScale < windowscale){//图片高宽比小于屏幕高宽比 
+     //图片缩放后的宽为屏幕宽 
+      imageSize.imageWidth = windowWidth; 
+      imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth; 
+    }else{//图片高宽比大于屏幕高宽比 
+     //图片缩放后的高为屏幕高 
+      imageSize.imageHeight = windowHeight; 
+      imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight; 
+    } 
+     
+   } 
+  }) 
+  console.log('缩放后的宽: ' + imageSize.imageWidth) 
+  console.log('缩放后的高: ' + imageSize.imageHeight) 
+  return imageSize; 
+ } 
+  
+ module.exports = { 
+  imageUtil: imageUtil 
+ } 
+ 
+