案例: 运动打卡-首页及各组件 布局样式

index页面

index.wxml

<view class="mainView">
	<view class="header">
		<image class="icon" src="../../img/logo.png"></image>
		<view>
			<view class="title">DC运动</view>
			<view class="desc">跑出范，Run出彩！</view>
		</view>
	</view>
	<view class="banner">
		<swiper autoplay="true" indicator-dots="true" interval="{{interval}}" duration="{{duration}}" circular="true" interval="1500">
			<block wx:for="{{imgUrls}}" wx:key="imgUrl">
				<swiper-item>
					<image src="{{item}}"></image>
				</swiper-item>
			</block>
		</swiper>
	</view>
	<view class="menu">
		<view>
			<block wx:for="{{pageNames}}" wx:key="pages">
				<navigator url="../{{item.id}}/{{item.id}}" class="nav">
					{{item.name}}
				</navigator>
			</block>
		</view>
	</view>
	<view class="pick">
  <view class="main">今日目标{{target_today}}公里</view>
		<picker-view indicator-style="height:30rpx;" style="height:60px; text-align:center; background-color:#efeff4;" value="{{value}}" bindchange="bindChange">
			<picker-view-column>
				<view wx:for="{{target}}" wx:key="tar">{{item}}公里</view>
			</picker-view-column>
		</picker-view>
	</view>
</view>

 

index.wxss

.icon{
  width:80rpx;
  height: 80rpx;
  margin: 10rpx;
}
.header{
  display: flex;
  background-color: #5EB2DF;
}
.title{
padding-left: 20rpx;
font-size: 40rpx;
color: white;
margin-bottom: 10rpx;
}
.desc{
  padding-left: 20rpx;
  font-size: 25rpx;
  color: white;
}
.mainView{
  background-color: #5EB2DF;
}
.menu{
  display: flex;
  padding: 40rpx;
  margin:10rpx;
  flex-wrap: wrap;
}
.nav{
  margin:10rpx 4rpx;
  padding:24rpx;
  min-width: 600rpx;
  min-height: 30rpx;
  color: white;
  text-align: center;
}
.nav:nth-child(1){
  background:-webkit-linear-gradient(left top,#fe7494,#fd75db);
}
.nav:nth-child(2){
  background:-webkit-linear-gradient(left top,#71e1e9,#64e3b5);
}
.nav:nth-child(3){
  background:-webkit-linear-gradient(left top,#fddf7c,#fda557);
}
.nav:nth-child(4){
  background:-webkit-linear-gradient(left top,#e17cfd,#9a79f2);
}
.main{
  color: white;
  text-align: center;
  font-size: 50rpx;
}
   
 

index.js

const app = getApp()
const targets=[]
for(let i=1;i<=50;i++){
  targets.push(i)
}
Page({
  data: {
    target_today:0,
    target:targets,
    userInfo: {},
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    interval:3000,
    duration:1000,
    imgUrls:[
      '../../img/main1.jpg',
      '../../img/main2.jpg',
      '../../img/main3.jpg',
      '../../img/main4.jpg'
    ],
    pageNames:[
      {
        id:"animation",
        name:"动画"
      },
      {
        id:"music",
        name:"音乐"
      },
      {
        id:"run",
        name:"跑步"
      },
      {
        id:"camera",
        name:"拍照"
      }
    ]
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  bindChange(e){
    //console.log(e)
    console.log(e.detail.value)
    this.setData({
      target_today:this.data.target[e.detail.value]
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})


 

app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/animation/animation",
    "pages/music/music",
    "pages/run/run",
    "pages/camera/camera"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#5EB2DF",
    "navigationBarTitleText": "运动打卡",
    "navigationBarTextStyle":"white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}