王明昌博客如果你对该文章中的内容有疑问/不解,可以点击此处链接提问
要注明问题和此文章链接地址 点击此处跳转
js
// pages/tab/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
swichNav: function (e) {
console.log(e);
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current,
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
wxml
<view class="continer">
<!--内容主体-->
<swiper class="swiper" current="1" duration="200" bindchange="swiperChange" previous-margin="20px" next-margin="20px" style="height: {{winHeight}}px;">
<swiper-item>
<view class="user-box" style="height: {{winHeight-40}}px;">
<view class="user-image">
<image class="image" src="http://www.wangmingchang.com/wp-content/uploads/2018/06/bef8b0b9ddb4ad7eee9e6d62f02e4da6_middle.jpg" />
</view>
<view class="user-info">
<view class="user-job">未知</view>
<view class="user-name">未知</view>
<view class="user-introduce">如果你亦环抱着梦想，拥有着无限的才华，我们 团队期待您的加入。</view>
<view class="joinin" bindtap="joinIn">即刻创作</view>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="user-box" style="height: {{winHeight-40}}px;">
<view class="user-image">
<image class="image" src="http://www.wangmingchang.com/wp-content/uploads/2018/06/bef8b0b9ddb4ad7eee9e6d62f02e4da6_middle.jpg" />
</view>
<view class="user-info">
<view class="user-job">未知</view>
<view class="user-name">未知</view>
<view class="user-introduce">如果你亦环抱着梦想，拥有着无限的才华，我们OkYoung 团队期待您的加入。</view>
<view class="joinin" bindtap="joinIn">即刻创作</view>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="user-box" style="height: {{winHeight-40}}px;">
<view class="user-image">
<image class="image" src="http://www.wangmingchang.com/wp-content/uploads/2018/06/bef8b0b9ddb4ad7eee9e6d62f02e4da6_middle.jpg" />
</view>
<view class="user-info">
<view class="user-job">未知</view>
<view class="user-name">未知</view>
<view class="user-introduce">如果你亦环抱着梦想，拥有着无限的才华，我们OkYoung 团队期待您的加入。</view>
<view class="joinin" bindtap="joinIn">即刻创作</view>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="user-box" style="height: {{winHeight-40}}px;">
<view class="user-image">
<image class="image" src="http://www.wangmingchang.com/wp-content/uploads/2018/06/bef8b0b9ddb4ad7eee9e6d62f02e4da6_middle.jpg" />
</view>
<view class="user-info">
<view class="user-job">未知</view>
<view class="user-name">未知</view>
<view class="user-introduce">如果你亦环抱着梦想，拥有着无限的才华，我们OkYoung 团队期待您的加入。</view>
<view class="joinin" bindtap="joinIn">即刻创作</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
wxss
page {
background-color: #0084ff;
}
.continer{
}
swiper{
height:600px;
}
swiper-item .user-box{
height:500px;
margin-top: 3%;
margin-left: 20rpx;
border-radius: 20rpx;
border: 1rpx solid rgba(200, 200, 200, 0.1);
box-shadow: 1px 1px 5px rgba(200, 200, 200, 0.4);
background-color: #fff;
}
swiper-item .user-image image{
width:350rpx;
height:350rpx;
border-radius: 350rpx;
margin-top: 20%;
border: 1rpx solid rgba(200, 200, 200, 0.4);
box-shadow: 1px 1px 5px rgba(200, 200, 200, 0.8);
}
.user-image{
margin: 0 25%;
}
.user-info {
text-align: center;
height: 240rpx;
}
.user-info view{
text-align: center;
}
.user-info .user-name{
margin-top: 80rpx;
font-size: 40rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: black;
font-weight: 600;
}
.user-info .user-introduce{
width: 80%;
margin: 0 auto;
height: 60rpx;
line-height: 60rpx;
font-size: 36rpx;
color: #5d5d5b;
}
.joinin{
width: 30%;
margin: 0 auto;
height: 60rpx;
font-size: 32rpx;
line-height: 60rpx;
margin-top: 170rpx;
color: #fff;
border-radius: 60rpx;
background-color: #118fff;
}
