版权声明:菜鸟老五 https://blog.csdn.net/qq_35695041/article/details/85608750
//WXML
<!-- 最外层视图 -->
<view class='component-container' hidden="{{!occup_modal}}">
<!-- 遮罩视图容器 -->
<mask class='mask' bind:tap="btn_close" />
<view class="navbar_view">
<!-- 居中视图容器 -->
<view class='container_centter' wx:if="{{caree_id==1}}">
<view class='caree_view'>
<swiper class='swiper' autoplay="{{swiper.autoplay}}" interval="{{swiper.interval}}" duration="{{swiper.duration}}" current="{{swiper.current}}">
<block wx:for="{{swiper.imgUrls}}" wx:key="item">
<swiper-item catchtouchmove="stopTouchMove">
<view class='swiper_img'>
</view>
<view class='craee_title_view'>
<view class='craee_money'>
<view class='craee_conter'>title文本描述</view>
</view>
<view class='baby_add'>这里是标题</view>
<view class='baby_list'>
<view class='baby_cont'>
<label class='list_tab' wx:for="{{list}}" wx:key="items">{{item.vigor}}</label>
</view>
</view>
</view>
</swiper-item>
</block>
</swiper>
</view>
<view class='submit'>
<view class='btn_sub' bind:tap="btn_close">NICE</view>
</view>
<!-- 左箭头 -->
<view class='btn_left' bindtap='btn_last'>
左
</view>
<!-- 右箭头 -->
<view class='btn_right' bindtap='btn_next'>
右
</view>
</view>
</view>
</view>
//JS
// ../components/_global/layers/family/layer-choice-occupation/layer-choice-occupation.js
/**
* > 组件名:layer-choice-occupation
* > 调用方式第一步:json配置"layer-choice-occupation":"../components/_global/layers/family/layer-choice-occupation/layer-choice-occupation"
* > 调用方式第二步:页面引入<layer-choice-occupation></layer-choice-occupation>
* > 调用方式第三步:区分显示ID
caree_id:function(res){}
* > 开发者:老五
* > 编辑时间:2019.1.1
*/
Component({
properties: {
occup_modal: {
type: Boolean,
value: true
},
},
data: {
caree_id: 1,
swiper: {
imgUrls: [
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546339060297&di=e24be632b2967fe00e06338b177870b8&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F02%2F28%2F7adb7f4e8f5a6aa62c9f3c4ddd950bc6.png',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546339060297&di=e24be632b2967fe00e06338b177870b8&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F02%2F28%2F7adb7f4e8f5a6aa62c9f3c4ddd950bc6.png',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546339060297&di=e24be632b2967fe00e06338b177870b8&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F02%2F28%2F7adb7f4e8f5a6aa62c9f3c4ddd950bc6.png'
],
indicatorDots: true,
autoplay: false,
interval: 5000,
duration: 1000,
current: 0,
},
list: [{ vigor: "标签" }, { vigor: "标签" }],
},
lifetimes: {
attached() { },
ready() { },
detached() { }
},
methods: {
// 这里禁止手动滑动
stopTouchMove: function () {
return false;
},
// 上一个
btn_last: function () {
var swiper = this.data.swiper;
var current = swiper.current;
swiper.current = current > 0 ? current - 1 : swiper.imgUrls.length - 1;
this.setData({
swiper: swiper,
})
},
// 下一个
btn_next: function () {
var swiper = this.data.swiper;
var current = swiper.current;
swiper.current = current < (swiper.imgUrls.length - 1) ? current + 1 : 0;
this.setData({
swiper: swiper,
})
},
// 关闭
btn_close: function () {
this.setData({
occup_modal: false
})
},
// 获取页面传到组件中的值
caree_id: function (res) {
}
}
})
//WXSS
/* 最外层视图 */
.component-container {
width: 100%;
height: 100%;
text-align: center;
}
/* 遮罩 */
.mask {
width: 100%;
height: 100%;
position: absolute;
background-color: #000;
top: 0;
left: 0;
z-index: 9;
opacity: 0.5;
}
.navbar_view {
position: fixed;
z-index: 999;
width: 100%;
text-align: center;
height: 200rpx;
line-height: 200rpx;
top: 15%;
}
/* 居中 */
.container_centter {
position: relative;
display: inline-block;
width: 90%;
height: 900rpx;
padding-top: 45rpx;
border-radius: 15rpx;
background-color: #fff;
}
.container_centters {
position: relative;
display: inline-block;
width: 90%;
height: 900rpx;
padding-top: 45rpx;
border-radius: 15rpx;
}
.craee_sucess {
position: absolute;
width: 100%;
height: 50rpx;
line-height: 50rpx;
top: -100rpx;
}
/* 切换职业视图容器 */
.caree_view {
position: relative;
display: inline-block;
width: 70%;
height: 80%;
background-color: #fff;
border: 1rpx solid #ccc;
}
/* 文案视图容器 */
.craee_title_view {
width: 100%;
position: absolute;
bottom: 0rpx;
height: 300rpx;
border-top: 1rpx solid #ccc;
}
/* 职业图片容器 */
.swiper_img {
position: relative;
width: 80%;
top: 20rpx;
display: inline-block;
height: 300rpx;
border: 1rpx solid #ccc;
}
/* 职业收入 */
.craee_money {
position: relative;
text-align: center;
width: 100%;
height: 50rpx;
line-height: 50rpx;
padding-top: 40rpx;
padding-bottom: 10rpx;
font-size: 28rpx;
}
/* 职业居中 */
.craee_conter {
width: 85%;
text-align: left;
height: 50rpx;
display: inline-block;
}
/* 宝宝属性加成 */
.baby_add {
position: relative;
width: 60%;
height: 50rpx;
border-top-right-radius: 35rpx;
border-bottom-right-radius: 35rpx;
background-color: #DD6666;
color: #FFFEC7;
line-height: 50rpx;
font-size: 30rpx;
}
/* 宝宝属性类表 */
.baby_list {
position: relative;
text-align: center;
width: 100%;
top: 10rpx;
height: 150rpx;
}
/* 居中 */
.baby_cont {
position: relative;
width: 90%;
height: 150rpx;
display: inline-block;
}
/* 属性 */
.list_tab {
float: left;
width: 28%;
height: 40rpx;
margin: 10rpx 10rpx;
font-size: 28rpx;
line-height: 40rpx;
}
/* swiper */
.swiper {
width: 100%;
height: 90%;
text-align: center;
display: inline-block;
}
/* 按钮视图 */
.submit {
position: absolute;
width: 100%;
bottom: 5%;
height: 100rpx;
line-height: 100rpx;
}
/* 确认按钮 */
.btn_sub {
display: inline-block;
width: 200rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 35rpx;
font-size: 30rpx;
color: #fff;
background-color: #FFA30B;
}
.btn_left {
position: absolute;
top: 45%;
left: 0rpx;
scrollbar-base-color: #fff;
width: 100rpx;
height: 100rpx;
}
.btn_right {
position: absolute;
top: 45%;
right: 0rpx;
scrollbar-base-color: #fff;
width: 100rpx;
height: 100rpx;
}
.left,
.right {
width: 60rpx;
height: 60rpx;
}
//JSON
{
"component": true,
"usingComponents": {}
}
//页面引入方式
//JSON
{
"usingComponents": {
"layer-choice-occupation":"../components/layer-choice-occupation/layer-choice-occupation"
}
}
//index.wxml引入方式
<layer-choice-occupation modal-hidden="{{occup_modal}}"></layer-choice-occupation>