作者 吴孟雨

首页开头,暂存

  1 +<?xml version="1.0" encoding="UTF-8"?>
  2 +<project version="4">
  3 + <component name="JavaScriptSettings">
  4 + <option name="languageLevel" value="ES6" />
  5 + </component>
  6 +</project>
  1 +<?xml version="1.0" encoding="UTF-8"?>
  2 +<project version="4">
  3 + <component name="ProjectModuleManager">
  4 + <modules>
  5 + <module fileurl="file://$PROJECT_DIR$/.idea/火柴西路.iml" filepath="$PROJECT_DIR$/.idea/火柴西路.iml" />
  6 + </modules>
  7 + </component>
  8 +</project>
  1 +<?xml version="1.0" encoding="UTF-8"?>
  2 +<project version="4">
  3 + <component name="VcsDirectoryMappings">
  4 + <mapping directory="$PROJECT_DIR$" vcs="Git" />
  5 + </component>
  6 +</project>
  1 +<?xml version="1.0" encoding="UTF-8"?>
  2 +<module type="WEB_MODULE" version="4">
  3 + <component name="NewModuleRootManager">
  4 + <content url="file://$MODULE_DIR$">
  5 + <excludeFolder url="file://$MODULE_DIR$/.tmp" />
  6 + <excludeFolder url="file://$MODULE_DIR$/temp" />
  7 + <excludeFolder url="file://$MODULE_DIR$/tmp" />
  8 + </content>
  9 + <orderEntry type="inheritedJdk" />
  10 + <orderEntry type="sourceFolder" forTests="false" />
  11 + </component>
  12 +</module>
1 /**app.wxss**/ 1 /**app.wxss**/
2 -.container {  
3 - height: 100%;  
4 - display: flex;  
5 - flex-direction: column;  
6 - align-items: center;  
7 - justify-content: space-between;  
8 - padding: 200rpx 0;  
9 - box-sizing: border-box; 2 +
  3 +
  4 +@font-face {font-family: "iconfont";
  5 + src: url('//at.alicdn.com/t/font_961048_ey8uu8eyju6.eot?t=1544523215072'); /* IE9*/
  6 + src: url('//at.alicdn.com/t/font_961048_ey8uu8eyju6.eot?t=1544523215072#iefix') format('embedded-opentype'), /* IE6-IE8 */
  7 + url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAASkAAsAAAAABvgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8dkgvY21hcAAAAYAAAABUAAABhmU+0M1nbHlmAAAB1AAAANgAAADYbiAdb2hlYWQAAAKsAAAALwAAADYTiqGcaGhlYQAAAtwAAAAcAAAAJAfeA4RobXR4AAAC+AAAAAwAAAAMDAAAAGxvY2EAAAMEAAAACAAAAAgAFABsbWF4cAAAAwwAAAAfAAAAIAERAD5uYW1lAAADLAAAAUUAAAJtPlT+fXBvc3QAAAR0AAAALgAAAD+v3CrleJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeMTyzZW7438AQw9zA0AAUZgTJAQDhrAwgeJztkMERgCAMBPdAeTgW4sMW6MOX5dMGHkG78GY2l1zgE2AFsjnNAroRQ5dTRZ7ZIl/iTbGL1Gi1d/jcknfFnsY/FX7tUY93SuNak+jrBD0XYw46AAEAAAAAA1gCPAAFAAAlAScJAQcCAAFYIP7I/sggxQFXIP7IATggAAAEAAD/oAOFA2EACwAXACQAMQAAAR4CDgEuATY3PgE3DgIeAT4BJicuATcuASIGBwYQFwkBNhADBycmEDc+ATIWFxYQAgAkNg4hQ0IoBhkPJBQ6Vhc0bWpBCykWO/M3jZ2ON3FxARMBE3Kc6elhYS55hXguYQI0ASxHPRwUPEUaDw88AUdzYi0hYW8qFxh7OTw8OXv+xXz+5wEZfAE7/nHw8GgBDGkvMzMvaf70AAAAeJxjYGRgYADi9XI7V8bz23xl4GZhAIEbpuvOI+j/C1gYmBOBXA4GJpAoAD6OCwUAeJxjYGRgYG7438AQw8IAAkCSkQEVMAMARwkCbAQAAAAEAAAABAAAAAAAAAAAFABseJxjYGRgYGBmMGJgYQABJiDmAkIGhv9gPgMADdkBUAB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICZkYmRmZGFgSuxqCi/XDclvzyPIyc/ObEkMz+PgQEAXj4HlwAA') format('woff'),
  8 + url('//at.alicdn.com/t/font_961048_ey8uu8eyju6.ttf?t=1544523215072') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  9 + url('//at.alicdn.com/t/font_961048_ey8uu8eyju6.svg?t=1544523215072#iconfont') format('svg'); /* iOS 4.1- */
10 } 10 }
  11 +
  12 +.iconfont {
  13 + font-family:"iconfont" !important;
  14 + font-size:16px;
  15 + font-style:normal;
  16 + -webkit-font-smoothing: antialiased;
  17 + -moz-osx-font-smoothing: grayscale;
  18 +}
  19 +
  20 +.icon-arrow-down:before { content: "\e63d"; }
  21 +
  22 +.icon-location:before { content: "\e600"; }
  23 +
  24 +
@@ -4,13 +4,14 @@ const app = getApp() @@ -4,13 +4,14 @@ const app = getApp()
4 4
5 Page({ 5 Page({
6 data: { 6 data: {
  7 + slide: [{image: '../../images/banner.png'}, {image: '../../images/banner.png'}],
7 motto: 'Hello World', 8 motto: 'Hello World',
8 userInfo: {}, 9 userInfo: {},
9 hasUserInfo: false, 10 hasUserInfo: false,
10 canIUse: wx.canIUse('button.open-type.getUserInfo') 11 canIUse: wx.canIUse('button.open-type.getUserInfo')
11 }, 12 },
12 //事件处理函数 13 //事件处理函数
13 - bindViewTap: function() { 14 + bindViewTap: function () {
14 wx.navigateTo({ 15 wx.navigateTo({
15 url: '../logs/logs' 16 url: '../logs/logs'
16 }) 17 })
@@ -21,7 +22,7 @@ Page({ @@ -21,7 +22,7 @@ Page({
21 userInfo: app.globalData.userInfo, 22 userInfo: app.globalData.userInfo,
22 hasUserInfo: true 23 hasUserInfo: true
23 }) 24 })
24 - } else if (this.data.canIUse){ 25 + } else if (this.data.canIUse) {
25 // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 26 // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
26 // 所以此处加入 callback 以防止这种情况 27 // 所以此处加入 callback 以防止这种情况
27 app.userInfoReadyCallback = res => { 28 app.userInfoReadyCallback = res => {
@@ -43,7 +44,7 @@ Page({ @@ -43,7 +44,7 @@ Page({
43 }) 44 })
44 } 45 }
45 }, 46 },
46 - getUserInfo: function(e) { 47 + getUserInfo: function (e) {
47 console.log(e) 48 console.log(e)
48 app.globalData.userInfo = e.detail.userInfo 49 app.globalData.userInfo = e.detail.userInfo
49 this.setData({ 50 this.setData({
  1 +{
  2 + "navigationBarTitleText": "火柴西路"
  3 +}
1 <!--index.wxml--> 1 <!--index.wxml-->
2 <view class="container"> 2 <view class="container">
3 - <view class="userinfo">  
4 - <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>  
5 - <block wx:else>  
6 - <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>  
7 - <text class="userinfo-nickname">{{userInfo.nickName}}</text>  
8 - </block> 3 + <view class="head">
  4 + <view class="position">
  5 + <view class="left">
  6 + <view class="iconfont icon-location"></view>
  7 + <text>北京</text>
  8 + <view class="iconfont icon-arrow-down"></view>
  9 + </view>
  10 + <input type="text"/>
9 </view> 11 </view>
10 - <view class="usermotto">  
11 - <text class="user-motto">{{motto}}</text> 12 + <swiper indicator-dots="{{true}}"
  13 + autoplay="{{true}}" interval="3000" duration="1000">
  14 + <block wx:for="{{slide}}" wx:key="index">
  15 + <navigator url="{{item.url}}" hover-class="navigator-hover">
  16 + <swiper-item>
  17 + <image src="{{item.image}}" class="slide-image"/>
  18 + </swiper-item>
  19 + </navigator>
  20 + </block>
  21 + </swiper>
12 </view> 22 </view>
13 </view> 23 </view>
1 /**index.wxss**/ 1 /**index.wxss**/
2 -.userinfo { 2 +.position {
  3 + width: 100%;
3 display: flex; 4 display: flex;
4 - flex-direction: column;  
5 align-items: center; 5 align-items: center;
  6 + justify-content: space-between;
  7 + position: fixed;
  8 + top: 0;
  9 + left: 0;
  10 + z-index: 10;
  11 + padding: 14rpx 20rpx;
  12 + -webkit-box-sizing: border-box;
  13 + -moz-box-sizing: border-box;
  14 + box-sizing: border-box;
6 } 15 }
7 -  
8 -.userinfo-avatar {  
9 - width: 128rpx;  
10 - height: 128rpx;  
11 - margin: 20rpx;  
12 - border-radius: 50%; 16 +.position .left {
  17 + display: flex;
  18 + align-items: center;
  19 +}
  20 +.position .left .icon-location {
  21 + font-size: 44rpx;
  22 + color: #ffffff;
  23 + margin-right: 14rpx;
  24 +}
  25 +.position .left .icon-arrow-down {
  26 + font-size: 36rpx;
  27 + color: #ffffff;
  28 + margin-left: 18rpx;
  29 +}
  30 +.position text {
  31 + color: #ffffff;
  32 + font-size: 28rpx;
  33 +}
  34 +.position input {
  35 + width: 478rpx;
  36 + height: 52rpx;
  37 + border-radius: 10rpx;
  38 + color: #ffffff;
  39 + padding-left: 20rpx;
  40 + font-size: 28rpx;
  41 + background-color: rgba(255,255,255,0.3);
13 } 42 }
14 -  
15 -.userinfo-nickname {  
16 - color: #aaa; 43 +swiper {
  44 + width: 100%;
  45 + height: 360rpx;
  46 + /*margin-top: 20rpx;*/
17 } 47 }
18 -  
19 -.usermotto {  
20 - margin-top: 200px; 48 +.slide-image {
  49 + width: 100%;
  50 + height: 100%;
21 } 51 }