当前位置:网站首页>【微信小程序】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();
},
边栏推荐
- Corresponding order of 18 and 25coco data of openpose and joint points
- 软件测试面试题(四)
- IOS interview preparation - other articles
- Mysql:The user specified as a definer (‘root‘@‘%‘) does not exist 的解决办法
- UE 在场景或UMG中播放视频
- Mysql:the user specified as a definer ('root '@'%) does not exist
- C语言实现三子棋
- The most complete NLP Chinese and English stop words list in the whole station (including punctuation marks, which can be copied directly)
- Reveal installation configuration debugging
- Build auto.js script development environment
猜你喜欢
![[untitled]](/img/6c/df2ebb3e39d1e47b8dd74cfdddbb06.gif)
[untitled]

un7.28:redis客户端常用命令。

C语言实现三子棋

Recommendation system of online education

UE plays video in scene or UMG

On prepayment of house purchase

Office提示系统配置无法运行怎么办?

Use openmap and ArcGIS to draw maps and transportation networks of any region, and convert OMS data into SHP format

Big silent event Google browser has no title

Common current limiting methods
随机推荐
Common current limiting methods
五个关联分析,领略数据分析师一大重要必会处理技能
Live in small private enterprises
Reveal安装配置调试
How to debug UDP port
使用近场探头和电流探头进行EMI干扰排查
在线教育的推荐系统
spinning up安装完使用教程测试是否成功,出现Library“GLU“ not found和‘from pyglet.gl import *错误解决办法
How to open IE browser by running win command
A little knowledge about management
电脑无法打开excel表格怎么办?excel打不开的解决方法
C语言实现三子棋
MySQL time calculation function
Various configurations when pulsar starts the client (client, producer, consumer)
IOS interview preparation - Online
Implementation of flutter gesture monitoring and Sketchpad
Command line interactive tools (latest version) inquirer practical tutorial
After the spinning up installation is completed, use the tutorial to test whether it is successful. There are library "Glu" not found and 'from pyglet.gl import * error solutions
【无标题】
Conv2d of torch