小程序插槽部分的使用slot标签

破茧成蝶810
24 阅读4分钟 
*****小程序插槽部分的使用slot标签 （比如标题和底部按钮是固定中间动态部分内容展示可以使用插槽）******
<!--components/BasePopup/BasePopup.wxml-->
<!--提示弹窗 -->
<view wx:if="{{isShow}}" class="base_popup_main" catch:touchmove="selfTouchMove">
<van-popup show="{{ isShow }}" z-index="{{99}}"  custom-class="{{customClass}}" custom-style="background-color:inherit" bind:click-overlay="clickoverlayFun">
	<view class="main" style="{{width? width+'rpx':''}}">
		<view class="title" wx:if="{{title}}">{{title}}</view>
		<!-- **插槽部分** -->
		<slot name="subViewslot"></slot>
		
		<view class="popup_btn_wrap {{isShowBtnCancel? '':'popup_single_btn_wrap'}}">
			<button wx:if="{{isShowBtnCancel}}" class="btn btn_cancel" bindtap="cancelFn">{{btnCancelText}}</button>
			<button class="btn btn_begin" bindtap="commitFn">{{btnCommitText}}</button>
		</view>
	</view>
	
</van-popup>

</view>

使用如下：
<!-- 弹窗插槽组件 批量跟单个公用一个弹窗组件 isBatchUpdate=true 就是批量-->
<BasePopup isShow="{{isShowSingle}}" btnCommitText="确定" title="{{'更改首笔交易'}}" bind:cancelFn="handleBasePopupCancel" bind:commitFn="handleBasePopupcommit" customClass='base_popup_visible' bind:clickoverlayFun="handleClickoverlayFun">
    <view slot="subViewslot" class="subViewslot">
        <view class="selectCountLable">
            <block wx:if="{{isBatchUpdate}}">
                <text class="unit">已选 </text>
                <text class="lableCount">{{snsNum}}</text>
                <text class="unit"> 台</text>
            </block>
            <block wx:else>
                <text class="unit">SN号 {{currentItem.sn}}</text>
            </block>
        </view>

        <view class="single_wrap">
            <view class="single_left">市场政策</view>
            <view class="single_right">
                <text>{{currentItem.policyName}}</text>
                <!-- <text class="iconfont icon-jiantou-you"></text> -->
            </view>
        </view>
        <view class="single_wrap20" bind:tap="handFirstTransEvent">
            <view class="single_left">首笔交易</view>
            <view class="single_right">
                <view>
                    <text class="{{currentActivityAmount?'lableSelect':'lableHint'}}">{{currentActivityAmount? currentActivityAmount:'请选择首笔交易'}}</text>
                    <text class="iconfont icon-xiangxiajiantou icon_font_arrow" style="padding-left: 10rpx;"></text>
                </view>
            </view>
        </view>
        <!-- 线条 -->
        <view class="single_wrap">
            <view class="single_left"></view>
            <view class="single_right">
                <view class="linne"></view>
            </view>
        </view>
    </view>
</BasePopup>

/* packageHome/components/devManagerChange/DevManagerChangeStandardFragment.wxss */
@import "../../../iconfont/iconfont.wxss";
.head-view {
	display: flex;
	flex-direction: column;
	background-color: white;
	position: sticky;
	top: 0;
	left: 0;
}
.right_wrap {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-right: 30rpx;
	position: relative;
}

.icon_filter {
	font-size: 28rpx;
	color: #C8C9CC;
}
/* 红点 */
.redDot {
	width: 10rpx; /* 设置元素的宽度 */
	height: 10rpx; /* 设置元素的高度 */
	background-color: red; /* 设置背景颜色为红色 */
	border-radius: 50%; /* 将边界角变成半径相等的圆形 */
	border-color: white;
	border: 2rpx solid white;
	position: absolute;
	right: 25rpx;
	top: 1rpx;
}
.filterlabel {
	padding-right: 14rpx;
	font-weight: 400;
	font-size: 28rpx;
	color: #666666;
	line-height: 44rpx;
}

.drop-wrap {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 114rpx;
	padding-left: 30rpx;
	justify-content: space-between;


}
.sn {
	font-weight: 600;
	font-size: 28rpx;
	color: #333333;
	line-height: 40rpx;
	padding-left: 20rpx;
}

/* 控制是否均分 */
.eeepay-dropdown .van-dropdown-menu__item {
	flex: none;

}

.policy-search-wrap {
	margin: 20rpx 40rpx 0rpx 40rpx;
}

.list-wrap {
	height: 596rpx;
}

.list-item {
	display: flex;
	flex-direction: column;
	height: 120rpx;
	margin-left: 40rpx;
	margin-right: 40rpx;
	background-color: white;
	border-bottom: 1rpx solid #eeeeee;
	color: #666666;
	justify-content: center;
	font-size: 28rpx;
}

/*  */
.list_wrap {
	margin-top: 10rpx;
}

.item_wrap {
	/* height: 202rpx; */
	margin: 0 30rpx 20rpx 30rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
}

.item_cell_first {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx 30rpx 22rpx 30rpx;
}
.check {
	color: var(--themeColor) !important;
}

.iconfontCheck {
	font-size: 32rpx;
	color: var(--aliconfontColor);
	display: flex;
	padding-right: 20rpx;
}
.btnXf {
	width: 110rpx;
	height: 54rpx;
	background: rgba(244, 30, 18, 0.08);
	border-radius: 32rpx;
	color: var(--themeColor);
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 400;
	font-size: 26rpx;
	line-height: 34rpx;
	text-align: center;
}

.item_cell {
	display: flex;
	flex-direction: row;
	padding-left: 86rpx;
	padding-bottom: 22rpx;
}

.item_label {
	padding-right: 40rpx;
	font-weight: 400;
	font-size: 26rpx;
	color: #999999;
	line-height: 36rpx;
	min-width: 104rpx;
}

.item_value {
	font-weight: 400;
	font-size: 28rpx;
	color: #666666;
	line-height: 40rpx;
	padding-right: 30rpx;
}

.no_data_wrap {
	font-weight: 400;
	font-size: 24rpx;
	color: #D4D4D4;
	line-height: 34rpx;
	text-align: center;
}
.bottom_wrap {
	width: 100%;
	height: 134rpx;
	position: fixed;
	bottom: -40rpx;
	left: 0;
	z-index: 2;
	background-color: white;
	display: inline-flex;
	flex-direction: row;
	box-shadow: 0rpx 4rpx 12rpx 0rpx #D4D4D4;
}
.bottom_wrap_box {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
	align-items: center;
}

.allCheck {
	font-weight: 400;
	font-size: 28rpx;
	color: #666666;
	line-height: 40rpx;
	padding-left: 10rpx;
}

.checkCount {
	font-weight: 400;
	font-size: 26rpx;
	color: #999999;
	line-height: 36rpx;
}

.bottom_wrap_right {
	display: flex;
	align-items: center;
}

.btnzsjg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 180rpx;
	height: 84rpx;
	border-radius: 42rpx;
	border: 1rpx solid var(--themeColor);

	font-weight: 400;
	font-size: 34rpx;
	color: var(--themeColor);
	line-height: 48rpx;
}

.btnConimt {
	width: 180rpx;
	height: 84rpx;
	background: var(--themeColor);
	border-radius: 42rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 400;
	font-size: 34rpx;
	color: #FFFFFF;
	line-height: 48rpx;
	text-align: center;
	margin-left: 20rpx;
}

.p60 {
	padding-top: 60rpx;
}

.single_wrap {
	display: flex;
	justify-content: space-between;
	align-content: center;
	padding-bottom: 60rpx;
}

.single_wrap20 {
	display: flex;
	justify-content: space-between;
	align-content: center;
	padding-bottom: 20rpx;
	
}
.linne{
	width: 100%;
	/* flex: 1; */
	border-bottom: 1px solid #eee;
	/* padding-bottom: 20rpx; */
}

.single_left {
	font-weight: 600;
	font-size: 28rpx;
	color: #666666;
	line-height: 40rpx;
	width: 200rpx;

}

.single_right {
	text-align: right;
	font-weight: 400;
	font-size: 28rpx;
	color: var(--txt-666-color);
	line-height: 40rpx;
	position: relative;
	padding-left: 30rpx;
	flex: 1;
}

.subViewslot {
	display: flex;
	/* height: 500rpx; */
	flex-direction: column;
	padding: 0rpx 40rpx 0 40rpx;
}

.mask {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	/* background-color: red; */
	/* display: none; */
}

.dialogbg {
	position: fixed;
	right: 40rpx;
	/* top: 500rpx; */
	z-index: 101;
	width: 376rpx;
	min-height: 200rpx;
	background: #FFFFFF;
	box-shadow: 2rpx -4rpx 18rpx 0rpx rgba(233, 233, 233, 0.92);
	border-radius: 10rpx;

}

.lableAmount {
	font-weight: 400;
	font-size: 26rpx;
	color: #666666;
	line-height: 50rpx;
	padding-bottom: 30rpx;
	padding-left: 30rpx;
	text-align: left;
}

.lableAmountTop20 {
	padding-top: 20rpx;
}

.unit {
	font-weight: 400;
	font-size: 26rpx;
	color: #999999;
	line-height: 36rpx;

}

.lableCount {
	font-weight: 400;
	font-size: 26rpx;
	color: #666666;
	line-height: 36rpx;
}

.selectCountLable {
	padding-top: 4rpx;
	padding-bottom: 60rpx;
}
avatar
文章
阅读
粉丝