微信小程序v0.2.0：无后端，前端数据写在js中

其他 2018-06-24 08:18:45 阅读次数: 0 

<!--index.wxml-->
<view class="container">
<view id='header'>
  <image class='bjimg' mode='aspectFit' src='./img/bg.jpg'></image>
  <image class='figure' mode='aspectFit' src='./img/fig.png'></image>
   <view bindtap='tel'> 
    <image class='tel' mode='aspectFit' src='./img/tel.png'></image>
   </view> 
</view>
<view id='content'>
  <swiper>
    <swiper-item>
      <view class='sheet'>
        <view class='contentHeader'>
          <image class='contentHeaderImg' mode='aspectFit' src='./img/1.png'></image>
        </view>
        <view class='textSelection'>
          <block wx:for='{{stringArray[0]}}'>
            <text class='{{item.styleClass}}'>{{item.str}}</text>
          </block>
        </view>
      </view>
    </swiper-item>
    <swiper-item>
      <view class='sheet'>
        <view class='contentHeader'>
          <image class='contentHeaderImg' mode='aspectFit' src='./img/2.png'></image>
        </view>
        <view class='contentImg'>
          <image class='companyImg' mode='aspectFit' src='./img/bbkj.jpg'></image>
        </view>
        <view class='textSelection'>
          <block wx:for='{{stringArray[1]}}'>
            <text class='{{item.styleClass}}'>{{item.str}}</text>
          </block>
        </view>
      </view>
    </swiper-item>
    <swiper-item>
      <view class='sheet'>
        <view class='contentHeader'>
          <image class='contentHeaderImg' mode='aspectFit' src='./img/2.png'></image>
        </view>
        <view class='contentImg'>
          <image class='companyImg' mode='aspectFit' src='./img/alibaba.jpg'></image>
        </view>
        <view class='textSelection'>
          <block wx:for='{{stringArray[2]}}'>
            <text class='{{item.styleClass}}'>{{item.str}}</text>
          </block>
        </view>
      </view>
    </swiper-item>
    <swiper-item>
      <view class='sheet'>
        <view class='contentHeader'>
          <image class='contentHeaderImg' mode='aspectFit' src='./img/2.png'></image>
        </view>
        <view class='contentImg'>
          <image class='companyImg' mode='aspectFit' src='./img/ms.jpg'></image>
        </view>
        <view class='textSelection'>
          <block wx:for='{{stringArray[3]}}'>
            <text class='{{item.styleClass}}'>{{item.str}}</text>
          </block>
        </view>
      </view>
    </swiper-item>
    <swiper-item>
      <view class='sheet'>
        <view class='contentHeader'>
          <image class='contentHeaderImg' mode='aspectFit' src='./img/3.png'></image>
        </view>
        <view class='contentImg'>
          <image class='companyImg' mode='aspectFit' src='./img/tjdx.jpg'></image>
        </view>
        <view class='textSelection'>
          <block wx:for='{{stringArray[4]}}'>
            <text class='{{item.styleClass}}'>{{item.str}}</text>
          </block>
        </view>
      </view>
    </swiper-item>    <swiper-item>
      <view class='sheet'>
        <view class='contentHeader'>
          <image class='contentHeaderImg' mode='aspectFit' src='./img/4.png'></image>
        </view>
        <view class='contentImg'>
          <image class='companyImg' mode='aspectFit' src='./img/ms-q1.jpg'></image>
        </view>
        <view class='textSelection textCenter'>
          <text>微软亚洲工程院人脉圈</text>
        </view>
        <view class='contentImg'>
          <image class='companyImg' mode='aspectFit' src='./img/ali-q1.jpg'></image>
        </view>
        <view class='textSelection textCenter'>
          <text>阿里毕业生人脉圈</text>
        </view>
      </view>
    </swiper-item>
  </swiper>
</view>
</view>

　　

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    stringArray: [
      [
        {
          str: '王立',
          styleClass: 'textH1'
        },
        {
          str: '男 | 37岁( 1981年11月3日)',
          styleClass: ''
        },
        {
          str: '百变空间-CTO、联合创始人、董事',
          styleClass: ''
        },
        {
          str: '5年阿里巴巴广告技术研发管理经验',
          styleClass: ''
        },
        {
          str: '18项发明专利、第一发明人',
          styleClass: ''
        },
        {
          str: '多家上市公司、基金顾问、合作对象包括：',
          styleClass: ''
        },
        {
          str: '-> 宜信',
          styleClass: ''
        },
        {
          str: '-> 知乎',
          styleClass: ''
        },
        {
          str: '-> 旷世',
          styleClass: ''
        },
        {
          str: '-> 华米（华米系，纽交所上市：HMI）',
          styleClass: ''
        },
        {
          str: '-> 石头科技（小米系）',
          styleClass: ''
        },
        {
          str: '-> 艾瑞咨询',
          styleClass: ''
        },
        {
          str: '万门大学特约讲师',
          styleClass: ''
        },
        {
          str: '联系方式：136-0000-0000',
          styleClass: ''
        },
        {
          str: 'Email：[email protected]',
          styleClass: ''
        },
      ], [
        {
          str: '2016年 ~ 至今',
          styleClass: 'textH1'
        },
        {
          str: '百变空间-CTO、联合创始人、董事、连续创业者',
          styleClass: ''
        },
        {
          str: '领导研发中心，研究方向主要为',
          styleClass: ''
        },
        {
          str: '-> ERP、VR以及在装修场景中的应用落地；',
          styleClass: ''
        },
        {
          str: '-> 机器学习，数据驱动营销',
          styleClass: ''
        },
        {
          str: '-> AI;',
          styleClass: ''
        },
        {
          str: '公司融资情况',
          styleClass: 'textH1'
        },
        {
          str: '2017年9月 A轮 估值2.7亿',
          styleClass: ''
        },
        {
          str: '投资方： 东方美莱，博将资本',
          styleClass: ''
        },
        {
          str: '2016年10月 Pre-A轮 估值1亿',
          styleClass: ''
        },
        {
          str: '投资方：博将资本，维度资本',
          styleClass: ''
        },
        {
          str: '2015年11月 天使轮 估值2500万',
          styleClass: ''
        },
        {
          str: '投资方：天使汇，维度资本',
          styleClass: ''
        },
      ], [
        {
          str: '2011年 ~ 2016年',
          styleClass: 'textH1'
        },
        {
          str: '阿里-阿里妈妈 芒果移动总负责人\总监',
          styleClass: ''
        },
        {
          str: '管理过广告部门一半以上的产品线，包括：',
          styleClass: ''
        },
        {
          str: '-> 定向广告产品线',
          styleClass: ''
        },
        {
          str: '-> DSP广告',
          styleClass: ''
        },
        {
          str: '-> 淘宝广告产品线',
          styleClass: ''
        },
        {
          str: '-> 无线广告产品线',
          styleClass: ''
        },
        {
          str: '-> 芒果移动',
          styleClass: ''
        },
        {
          str: '参加过有盟和芒果移动的受过过程，最后只为是芒果移动的总负责人',
          styleClass: ''
        },
        {
          str: '深耕机器学习算法、高可用性引擎等技术',
          styleClass: ''
        },
        {
          str: '在职期间申请18项发明专利、第一发明人',
          styleClass: ''
        },
      ], [
        {
          str: '2006年 ~ 2011年',
          styleClass: 'textH1'
        },
        {
          str: '微软=微软亚洲研究院 技术经理',
          styleClass: ''
        },
        {
          str: '先后经历过：',
          styleClass: ''
        },
        {
          str: '-> windows mobile团队',
          styleClass: ''
        },
        {
          str: '-> IE团队',
          styleClass: ''
        },
        {
          str: '-> SQL Server、SQL Cloud团队',
          styleClass: ''
        },
        {
          str: '-> 深耕手机开发、浏览器内核、SQL Engine、Cloud技术',
          styleClass: ''
        },
        ], [
        {
          str: '2003年 ~ 2006年',
          styleClass: 'textH1'
        },
        {
          str: '天津大学-计算机系统结构',
          styleClass: ''
        },
        {
          str: '硕士学位',
          styleClass: ''
        },
        {
          str: '1999年 ~ 2003年',
          styleClass: 'textH1'
        },
        {
          str: '天津大学-计算机科学与技术',
          styleClass: ''
        },
        {
          str: '学士学位',
          styleClass: ''
        },
        {
          str: '2000年 ~ 2003年',
          styleClass: 'textH1'
        },
        {
          str: '天津大学-工商管理',
          styleClass: ''
        },
        {
          str: '学士学位（二学位）',
          styleClass: ''
        },
        ], []
    ]
  },
  //事件处理函数
  bindViewTap: function() {
  },
  onLoad: function () {
  },
  tel() {
    wx.makePhoneCall({
      phoneNumber: app.globalData.phoneNumber,
    })
  }
})

　

/**index.wxss**/
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:flex-start;
  padding: 0;
  background-color: #DDDDDD;
}

#header{
  width: 100%;
  height: 400rpx;
  background-color: #040E18;
  /* display: flex;
  flex-direction: column; 
  让图片figure跑上来*/
  display: flex;
  flex-direction:column;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding: 0;
}

.bjimg{
  display: block;
  width: 750rpx;
  height: 400rpx;
}

.figure{
  display: block;
  width: 728rpx;
  height: 512rpx;
  position: absolute;
  margin-top: -40rpx;
  margin-left: -130rpx;
}

.tel{
  display: block;
  width: 70rpx;
  height: 70rpx;
  position: absolute;
  margin-top: -100rpx;
  margin-left: 200rpx;
}

#content{
  width: 100%;
  height: 1900rpx;
  background-color: #040E18;
}

.contentHeaderImg{
  display: block;
  width: 750rpx;
  height: 112rpx;
}

.textSelection{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items:flex-start;
  padding: 50rpx;
}

text{
  display: block;
  color: #FFFFFF;
  margin: 10rpx;
  font-size: 16px;
}

.textH1{
  font-size: 18px;
  color: aqua;
  margin: 25rpx 0 25rpx -10rpx;
}

swiper, swiper-item, .sheet{
  width: 100%;
  height: 100%;
  /* 这里好难啊 */
}

.contentImg{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:flex-start;
  padding: 60rpx 0 0 0;
}

.companyImg{
  display: block;
  width: 650rpx;
  height: 381rpx;
}

.sheet{
  display: flex;
  flex-direction:column;
  justify-content: flex-start;
  align-items: center;
}

.textCenter{
  align-items: center;
}

　　

猜你喜欢

转载自www.cnblogs.com/tabCtrlShift/p/9219473.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022