本文给大家带来的是微信小程序豆瓣同城背景引导页设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/location/splash/splash.wxml-->
<view class="container">
<image class="slogan-paper" mode="aspectFill" src="/images/slogan_paper.jpg"></image>
<view class="session-content">
<view class="slogan-wrapper">
<text class="slogan-text">在这陌生的城市里</text>
<text class="slogan-text">能与你相遇</text>
<text class="slogan-text">真好</text>
</view>
<view bindtap="bindmottotap" class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
<!--<view class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
-->
</view>
|
二、wxss样式文件代码如下：
/* pages/location/splash/splash.wxss */
.container {
height: 100%;
display: flex;
background: #fff;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
.slogan-paper {
width: 100%;
height: 100%;
flex-grow: 1;
}
.session-content {
position: fixed;
width: 100%;
bottom: 150rpx;
}
.slogan-wrapper {
display: flex;
position: fixed;
height: 60%;
top: 140rpx;
width: 100%;
padding: 0rpx 30rpx 0rpx 30rpx;
flex-direction: row-reverse;
box-sizing: border-box;
}
.slogan-text {
color: #fff;
writing-mode: vertical-lr;
display: inline-block;
font-size: 56rpx;
font-weight: 500;
margin-left: 12rpx;
margin-right: 12rpx;
}
.slogan-text:last-child {
margin-right: 0rpx;
}
.usermotto {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.user-motto {
color: #9e9e9e;
padding: 8rpx 12rpx 8rpx 12rpx;
border: 2px solid #6e6e6e;
font-weight: 600;
border-radius: 4rpx;
}
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #9e9e9e;
}
|
三、js页面代码如下：
// pages/location/splash/splash.js
var app = getApp();
Page({
data: {
userInfo: {},
motto: '豆瓣同城'
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
var that = this;
// 获取用户信息
app.getUserInfo(function (userInfo) {
that.setData({
userInfo: userInfo
});
console.log("userInfo: " + userInfo);
});
// 获取用户的位置
app.getLocation();
},
onReady: function () {
// 页面渲染完成
},
onShow: function () {
// 页面显示
},
onHide: function () {
// 页面隐藏
},
onUnload: function () {
// 页面关闭
},
bindmottotap: function (event) {
var loc = "";
if (app.globalData.latitude && app.globalData.longitude) {
loc = "?latitude=" + app.globalData.latitude + "&&longitude=" + app.globalData.longitude;
}
wx.redirectTo({
url: '/pages/location/location' + loc
});
}
})
|
.jpg)
.jpg)
