微信小程序 swiper + scroll-view = ？

最近用 swiper + scroll-view 做了一个好玩的（提升用户体验）

看下图

---

很多 app 中都有具体应用场景 (微信小程序订单) (淘宝首页) (QQ 音乐)

---

我在小程序中的应用

---

show me the code

<view class="all">
	<view class="head-title" bindtap="clickHead">
		<view class="{
     
     {headOneTitle}}">A</view>
		<view class="{
     
     {headTwoTitle}}">B</view>
	</view>
	<swiper current="{
     
     { currentNum }}" bindchange="swiperChanged">
		<swiper-item>
			<scroll-view scroll-y="true">
				<view>A</view>
				<view>A</view>

			</scroll-view>
		</swiper-item>

		<swiper-item>
			<scroll-view scroll-y="true">
				<view>B</view>
				<view>B</view>
				
			</scroll-view>
		</swiper-item>
	</swiper>
</view>

.all {
    
    
	height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.bigTitle {
    
    
	color: #fff;
	background-color: #07c160;
}

.head-title {
    
    
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	height: 100rpx;
}

.head-title view {
    
    
	height: 100rpx;
	line-height: 100rpx;
	padding: 0 50rpx;
}

swiper {
    
    
	/* background-color: yellow; */
	width: 100%;
	flex: 1;	
}

scroll-view {
    
    
	background-color: red;
	height: 100%;
	width: 100%;
}

Page({
    
    

	data: {
    
    
		headOneTitle: 'bigTitle',
		headTwoTitle: '',
		currentNum: 0
	},

	// 设置　head title style
	setHeadTitle: function (a) {
    
    
		console.log(a)

		if (a) {
    
    
			this.setData({
    
    
				headOneTitle: '',
				headTwoTitle: 'bigTitle',
			})
		} else {
    
    
			this.setData({
    
    
				headOneTitle: 'bigTitle',
				headTwoTitle: '',
			})
		}
	},

	swiperChanged: function (e) {
    
    
		let a = e.detail.current;
		this.setHeadTitle(a);
	},

	clickHead: function () {
    
    
		if (!this.data.headOneTitle) {
    
    
			this.setData({
    
    
				currentNum: 0
			})
		} else {
    
    
			this.setData({
    
    
				currentNum: 1
			})
		}
	}
})

---

用户体验上

---

喜欢或对你有帮助，请点个赞吧 。

有错误或者疑问还请评论指出。

我的个人网站 --> 点击访问 。

---

END

写完这个博客，发现 csdn 上早有前辈分享。