本文给大家带来的是微信小程序斗鱼登陆可看主播提示页设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<view class="landing" style="opacity:{{opacity}};">
<view class="landing_desc">
<image src="../image/未登录.jpg"></image>
<text>登录后才能看到你喜欢的主播哦~</text>
</view>
<view class="landing_tab" bindtap="tablanding">
<text class="landingtab">点击登录</text>
</view>
</view>
<view class="toplanding" style="display:{{display}};">
<view class="toplanding_img">
<image src="../image/登录.jpg"></image>
</view>
<view class="toplanding_desc">
<text>用户名:</text><input type="text" bindinput="userNameInput"/>
<text>密码:</text><input type="text" bindinput="userPasswordInput" password="true"/>
</view>
<view class="btn" style="margin-top:30rpx;">
<button bindtap="yes">确定</button>
</view>
</view>
|
二、wxss样式文件代码如下：
.landing{
height: 100%;
width: 100%;
}
.landing .landing_desc{
margin-top: 300rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.landing image{
height: 200rpx;
width: 200rpx;
}
.landing .landing_desc text{
position: relative;
top: 20rpx;
font-size: 32rpx;
}
.landing_tab{
margin: 0 auto;
position: relative;
top: 50rpx;
display: flex;
justify-content: center;
align-items: center;
width: 200rpx;
height: 80rpx;
border-radius: 50rpx;
border: 5rpx solid #FFCE43;
}
.landing_tab text{
color: #FFCE43;
font-weight: bold;
}
.toplanding{
margin: 0 auto;
position: relative;
bottom:450rpx;
width:700rpx;
height:600rpx;
display: flex;
align-items: center;
flex-direction: column;
}
.toplanding_img image{
height: 200rpx;
width: 200rpx;
}
.toplanding_desc{
position: relative;
margin-left:70rpx;
font-weight: bold;
width: 100%
}
input{
margin: 0 auto;
width:60%;
height: 30rpx;
border:5rpx solid #FFCE43;
}
.toplanding_desc text{
position: relative;
top: 50rpx;
right: 10rpx;
}
.toggle{
transform: translate(0, 0);
}
|
三、js页面代码如下：
// pages/pages_sy/pages_sy.js
Page({
/**
* 页面的初始数据
*/
data: {
opacity:1,
display:"none"
},
tablanding: function () {
this.setData({
opacity:0,
display:"flex"
})
},
// const btn = document.querySelector('.btn');
// const mask = document.querySelector('.weui-mask');
// const iosActionsheet = document.getElementById('iosActionsheet');
// const cancel = document.getElementById('iosActionsheetCancel');
// cancel.addEventListener('click',function (){
// mask.style.display = 'none';
// iosActionsheet.classList.remove('weui-actionsheet_toggle');
// },false);
// btn.addEventListener('click',function (){
// mask.style.display = 'block';
// iosActionsheet.classList.add('weui-actionsheet_toggle');
// },false);
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
.jpg)
.jpg)
