uniapp中（swiper）和（scroll-view）+（uni-popup）合并使用

首先去uniapp插件市场下载uni-popup（https://ext.dcloud.net.cn/plugin?id=329）

效果图

 

 代码块

<template>
	<view class="hand">
		<scroll-view class="scroll-view" scroll-x="true">
			<view class="scollInfo">
				<view class="dataList" v-for="(item,index) in scolList" :key='item.characterId'>
					<image :src="item.pics" @click="scrollClick(index)"></image>
					<text>{{item.title}}</text>
				</view>
			</view>
		</scroll-view>
		<uni-popup ref="Popup" type="center" :animation="false">
			<view class="Popup">
				<view class="del" @click="DelClick">
					<image src="../../static/del.png" mode=""></image>
				</view>
				<view class="swiperMain">
					<swiper @change="changeswiper" :interval="2000" :duration="500" circular="true"
						indicator-color="#000" indicator-active-color='#f63' easing-function="true"
						indicator-dots='true' :current='scrollIndex'
						style="width: 75%;margin: 0 auto;background-color: #fff;">
						<swiper-item v-for="(item,index) in scolList" :key='item.titleId'>
							<image :src="item.pics"></image>
						</swiper-item>
					</swiper>
					<view class="textInfo">
						<text>{{switeList.title}}</text>
						<text>{{switeList.url}}</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scolList: [{
						pics: 'https://tilin.gitee.io/super_hero_preview/static/icons/uniapp.png',
						url: 'https://uniapp.dcloud.io/',
						title: 'Uniapp',
						titleId: 1
					},
					{
						pics: 'https://www.runoob.com/wp-content/uploads/2017/01/vue.png',
						url: 'https://cn.vuejs.org/',
						title: 'Vue',
						titleId: 2
					},
					{
						pics: 'https://www.runoob.com/wp-content/uploads/2016/02/react.png',
						title: 'React',
						url: 'https://react.docschina.org/',
						titleId: 3
					},
					{
						pics: 'https://www.runoob.com/wp-content/uploads/2014/06/angular.jpg',
						title: 'AngularJS',
						url: 'https://www.angularjs.net.cn/',
						titleId: 4
					}, {
						pics: 'https://tilin.gitee.io/super_hero_preview/static/icons/github.png',
						title: 'GitHub',
						url: 'https://github.com/',
						titleId: 5
					}
				],
				scrollIndex: null,
				switeList: []
			}
		},
		methods: {
			changeswiper(e) {
				this.scolList.forEach((item, index) => {
					if (index == e.detail.current) {
						this.switeList = item
					}
				})
			},
			scrollClick(index) {
				this.scrollIndex = index
				this.scolList.forEach((v, i) => {
					if (index == i) {
						this.switeList = v
					}
				})
				this.$refs.Popup.open('top')
			},
			DelClick() { //删除
				this.$refs.Popup.close()
			},
		}
	}
</script>
<style>
	.scollInfo {
		width: 95%;
		display: flex;
		text-align: center;
	}

	.scollInfo .dataList {
		padding-right: 20rpx;
	}

	.scollInfo .dataList:last-child {
		padding-right: 0;
	}

	.scollInfo .dataList image {
		width: 180rpx;
		height: 180rpx;
		display: block;
		border: 1px solid #eee;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.scollInfo .dataList text {
		font-size: 25rpx;
		color: #777;
		font-weight: bold;
	}


	.Popup {
		background-color: hsla(0, 0%, 100%, .0);
		height: 100%;
		width: 800rpx;
		margin: 0 auto;
	}

	.Popup .del {
		display: block;
		text-align: right;
		width: 83%;
		display: block;
		margin: 0 auto;
	}

	.Popup .del image {
		width: 70rpx;
		height: 70rpx;
	}

	.Popup .swiperMain swiper {
		height: 600rpx;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
	}

	.Popup .swiperMain image {
		width: 100%;
		height: 100%;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
	}

	.Popup .textInfo {
		width: 75%;
		margin: 0 auto;
		background-color: #fff;
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
		text-align: center;
		padding: 20rpx 0;
		border-top: 1px solid #222;
	}


	.Popup .textInfo text {
		font-size: 38rpx;
		color: #000;
		font-weight: bold;
		display: block;
	}

	.Popup .textInfo text:last-child {
		font-weight: normal;
		font-size: 30rpx;
		color: #777;
	}
</style>

---

扩招（签到一天只弹一次弹层 ）

created() {
var yesterday = uni.getStorageSync('yesterday')
			var time = new Date()
			var year = time.getFullYear(); //年
			var month = time.getMonth() + 1; //月
			var date = time.getDate(); //日
			this.today = `${year}-${month}-${date}`
			if (!yesterday && yesterday != this.today) {
				uni.setStorageSync('yesterday', this.today)
				Ajax.indexNoticeList(this.page).then(res => {
					this.$refs.popupMessage.open();
					this.todayList = res.rows
				})
			} 
}