当前位置:网站首页>【微信小程序】swiper滑动页面,滑块左右各露出前后的一部分,露出一部分
【微信小程序】swiper滑动页面,滑块左右各露出前后的一部分,露出一部分
2022-07-29 04:54:00 【常安cc】
<!--pages/vip/vip.wxml-->
<view class="pageBox">
<swiper class="swiper" current="{
{currentTab}}" next-margin="50rpx" previous-margin="50rpx" bindchange="switchTab" style="width: 100%;height:400rpx;position: absolute;top:{
{40*2}}rpx;left: 0;z-index: 999;">
<block wx:for="{
{4}}" wx:key="index">
<swiper-item item-id="{
{index}}" data-item-id="{
{index}}" bindtap='clickChange'>
<view class='li'>
<image class="vipImg" src="/image/vip{
{index}}.png"></image>
</view>
</swiper-item>
</block>
</swiper>
<swiper class="tab-content" current="{
{currentTab}}" duration="300" bindchange="switchTab">
<swiper-item wx:for="{
{4}}" wx:key="index">
<scroll-view scroll-y="true" class="scoll-h">
<image class="bgImg" src="/image/vip{
{index}}Bg.png" show-menu-by-longpress></image>
</scroll-view>
</swiper-item>
</swiper>
</view>
/* pages/vip/vip.wxss */
page {
width: 100%;
height: 100%;
display: flex;
overflow: hidden;
background-color: #1a1728;
}
.pageBox {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #1a1728;
}
.vipImg {
width: 95%;
height: 90%;
position: relative;
}
.vipImg:nth-child(4) {
width: 120%;
height: 90%;
position: relative;
}
.tab-content,
.bgImg {
width: 100%;
height: 100%;
}
.scoll-h {
height: 100%;
}
.scrollBox {
/* background-color: pink; */
height: 380rpx;
display: flex;
flex-wrap: nowrap;
width: 400%;
}
.vipCurrImg {
position: absolute;
top: 25%;
left: 48%;
width: 104rpx;
height: 40rpx;
}
.li {
width: 100%;
height: 90%;
display: flex;
align-items: center;
justify-content: center;
}
const app = getApp()
Page({
/** * 页面的初始数据 */
data: {
currentTab: 0, //预设当前项的值
},
// 滚动切换标签样式
switchTab: function (e) {
console.log('swiper', this.data.currentTab);
console.log('swiper', e.detail.current);
this.setData({
currentTab: e.detail.current,
});
console.log(e.detail.current);
// this.checkCor();
},
边栏推荐
- GCC基础知识
- Climbing the pit of traffic flow prediction (II): the simplest LSTM predicts traffic flow using tensorflow2
- C language implementation of three chess
- stack和queue和优先级队列(大堆和小堆)模拟实现和仿函数讲解
- Nail dialog text converted to pictures cannot be copied and pasted on the document
- Five correlation analysis, one of the most important skills of data analysts
- Flutter 手势监听和画板实现
- Various configurations when pulsar starts the client (client, producer, consumer)
- SSM integration, addition, deletion, modification and query
- 盒子水平垂直居中布局(总结)
猜你喜欢
Office提示系统配置无法运行怎么办?
The most complete NLP Chinese and English stop words list in the whole station (including punctuation marks, which can be copied directly)
(heap sort) heap sort is super detailed, I don't believe you can't (C language code implementation)
A little knowledge about management
Big silent event Google browser has no title
spinning up安装完使用教程测试是否成功,出现Library“GLU“ not found和‘from pyglet.gl import *错误解决办法
Sguard64.exe ace guard client exe: frequent disk reading and writing, game jamming, and Solutions
在线教育的推荐系统
五个关联分析,领略数据分析师一大重要必会处理技能
ssm整合增删改查
随机推荐
Corresponding order of 18 and 25coco data of openpose and joint points
Makefile+Make基础知识
Correct user dragging method
IOS interview preparation - other articles
GCC Basics
Command line interactive tools (latest version) inquirer practical tutorial
IOS interview preparation - Objective-C
Deep analysis of data storage in memory (Advanced C language)
UE plays video in scene or UMG
What are the core features of the digital transformation of state-owned construction enterprises?
Implementation of img responsive pictures (including the usage of srcset attribute and sizes attribute, and detailed explanation of device pixel ratio)
Software test interview questions (4)
EF Core: 一对一,多对多的配置
Opencv environment construction
MySQL定时调用预置函数完成数据更新
【无标题】
Mysql各版本下载地址及多版本共存安装
Connection database time zone setting
SparkSql批量插入或更新,保存数据到Mysql中
The most complete NLP Chinese and English stop words list in the whole station (including punctuation marks, which can be copied directly)