- 如何让swiper-item的高度可以占满剩余位置并且滑动内容的时候不影响其余位置?
https://developers.weixin.qq.com/s/jf86aymK7uRR 红色背景是swiper-item [图片]
05-29 - swiper-item中嵌套一个scroll-view后真机为什么出现两个滚动条?
<view> <!-- 页眉部分,包含Logo和标题 --> <view class="header"> <view> <image src="{{userInfo.avatarUrl}}" class="header-user-avatar" /> </view> <view class="header-content"> <p style="font-size: 1rem"> Hi,{{userInfo.nickName ? userInfo.nickName :'微信用户'}} </p> <view> <t-tag class="header-tag" style="background-color: #d6f6f1; margin-right: 0.9rem">标准</t-tag> <t-tag class="header-tag" style="background-color: #d4f5d2">剩余30天到期</t-tag> </view> </view> </view> <!-- Tab布局 --> <view class="navBox"> <view class="titleBox" wx:for="{{tabList}}" bindtap="tabsOn" data-idx="{{item.index}}"> <text class="{{item.index == tabsId ? 'fontColorBox' : ''}}">{{item.title}}</text> </view> </view> <!-- 内容布局 --> <swiper class="swiperTtemBox" bindchange="slideOn" current="{{tabsId}}" circular> <!-- 场次 --> <swiper-item skip-hidden-item-layout="{{true}}"> <scroll-view wx:if="{{showSwiper === '' }}" class="scroll-view-container" scroll-y="true"> <t-grid style="margin: 1rem; border-radius: 30rpx" column="{{2}}"> <t-grid-item text="时间" icon="time" /> <t-grid-item text="球场" image="slot"> <view slot="image" class="grid-item__image"> <view style="display: flex"> <image src="../../assets/Basketball.svg" mode="" style="width: 2.2rem; height: 2.2rem" /> </view> </view> </t-grid-item> </t-grid> <view style="margin: 1rem"> <block wx:for="{{venueCell}}" wx:key="venueId"> <t-swipe-cell right="{{right}}" catch:click="onActionClick"> <view class="cell-container"> <view class="cell-item"> <p>{{item.time}}</p> </view> <view class="cell-item"> <p>{{item.court}}</p> </view> </view> </t-swipe-cell> </block> </view> <view style="padding-bottom:20rpx"> </view> </scroll-view> </swiper-item> </swiper> </view> const venueCell = Array.from({ length: 20 }, (_, index) => ({ time: "2024-1-1 12:41", // 时间固定为2024-1-1 12:41 court: "苏州体育馆" + (index + 1), // 场地名称加上编号 venueId: index + 1, // 场地ID为索引值加1 })); .scroll-view-container { height: 100%; overflow-y: auto; } 这段代码中使用了scroll-view来实现滚动列表,列表中有多个数据需要渲染,venueCell是 20条需要渲染的数据。 也设置了高度 100vh, overflow-y: auto,但是在真机中会出现两个滚动条,我希望只需要一个滚动条,可以在全屏进行滚动(类似微信消息那样) [图片]
05-28 - swiper-item嵌套的t-swipe-cell为什么在真机中无法进行拖动?
wxml代码: <view> </view> <!-- 内容布局 --> <swiper class="swiperTtemBox" bindchange="slideOn" current="{{tabsId}}" circular > <!-- 首页 --> <swiper-item skip-hidden-item-layout="{{true}}"> <view wx:if="{{showSwiper === ''}}"> <t-grid class="grid-block" column="{{3}}"> <t-grid-item text="球队" icon="member" /> <t-grid-item text="别名" icon="extension" /> <t-grid-item text="状态" icon="api" /> </t-grid> <view class="container-swipe-cell"> <block wx:for="{{playerCell}}" wx:key="teamId"> <t-swipe-cell right="{{right}}" catchtouchmove="onSwipeTouchMove" catch:click="onActionClick" > <view class="cell-container"> <view class="cell-item"> <p>{{item.name}}</p> </view> <view class="cell-item"> <p>{{item.alias}}</p> </view> <view class="cell-item"> <t-tag wx:if="{{item.status}}" variant="light" theme="success" >进行中</t-tag > <t-tag wx:else theme="warning" variant="light" >待开始</t-tag > </view> </view> </t-swipe-cell> </block> </view> </swiper> </view> TS代码: data: { // 球队内容 playerCell: [ { name: "ASYS", alias: "asys", status: true, teamId: 1, }, { name: "ASYS1", alias: "asys2", status: true, teamId: 2, }, ], // 统计内容 statisticsCell: [ { name: "ASYS", alias: "asys", schedule: "9/10", teamId: 1, }, { name: "ASYS1", alias: "asys2", schedule: "1/2", teamId: 2, }, ], right: [ { text: "编辑", icon: { name: "edit", size: 16, }, className: "btn edit-btn", }, { text: "开始", icon: { name: "play", size: 16, }, className: "btn play-btn", }, ], rightIcon: [ { icon: "edit", className: "btn edit-btn", }, { icon: "play-circle-stroke", className: "btn play-btn", }, ], }, methods: { slideOn(e: { detail: { current: any } }) { // 拿到当前索引并动态改变 this.setData({ tabsId: e.detail.current, }); }, onSwipeTouchMove: function () { console.log("Swiping t-swipe-cell"); return; }, tabsOn(e: { currentTarget: { dataset: { idx: any } } }) { this.setData({ //拿到当前索引并动态改变 tabsId: e.currentTarget.dataset.idx, }); }, onActionClick({ detail }: any) { // wx.showToast({ title: `你点击了${detail.text}` }); if (detail.text === "开始") { this.setData({ showSwiper: "play", }); } else { this.setData({ showSwiper: "edit", }); } }, onDelete() { wx.showToast({ title: "你点击了删除", icon: "none" }); }, onEdit() { wx.showToast({ title: "你点击了编辑", icon: "none" }); }, }, z昨天发现将app.josn中"componentFramework": "glass-easel",去掉后可以进行真机拖动,不确定以上代码片段有没有问题
05-22