wx-open-launch-weapp 样式问题

最新推荐文章于 2025-01-07 16:20:34 发布

a_靖

最新推荐文章于 2025-01-07 16:20:34 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端 uni-app 文章标签： H5跳转小程序跳转小程序样式 H5跳小程序样式

本文链接：https://blog.csdn.net/qq_35713752/article/details/124293707

Web前端同时被 2 个专栏收录

406 篇文章

订阅专栏

uni-app

87 篇文章

订阅专栏

本文介绍了在微信小程序中使用wx-open-launch-weapp组件时，由于样式调试困难，建议采用绝对布局填充点击区域以优化用户体验。提供了列表、轮播图和按钮三种类型的示例代码，展示如何设置样式以确保点击区域覆盖内容，并通过透明层增强点击反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wx-open-launch-weapp 样式设置调试非常麻烦，所以建议用绝对布局占满需要点击的区域；

具体实现代码：

提供几个类型的示例

示例代码1：列表

<view class="list">
			<view class="" v-if="historyList.length>0" v-for="(item,idx) in historyList">
					
				<view class="listItem" style="position: relative">
					<view class="p_r listItemm" style="padding: 20rpx;z-index: 1;" @click="nav_live(item.id,item)">

						<image class="itemImg" :src="item.icon_img_src" mode=""></image>
						<view class="itemR">

							<view class="listTitle">
								{{item.name}}
							</view>
							<view class="date">
								{{$util.timeToDate(item.start)}}
							</view>
							<view class="p_r seeNum">
								<image class="see" :src="see"></image>

								<view class="mun">
									{{item.pv||0}}
								</view>
							</view>
						</view>
					</view>
					<wx-open-launch-weapp style="position: absolute;z-idnex:999; top: 0, left: 0;bottom:0;right:0;width: 100%;height: 100%; opacity: 0.3; background: blue" v-if="item.appid" id="launch-btn" :path="item.pagepath" :username="item.appid">
						<script type="text/wxtag-template">
							<div style="position: absolute;z-idnex:999; top: 0, left: 0;bottom:0;right:0;width: 100%;height: 100%; opacity: 0.3; background: red" />
						</script>
					</wx-open-launch-weapp>
				</view>
			</view>
		</view>

示例代码2：轮播图

<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="(item,index) in abs">
				<view v-if="item.appid" class="image" @click="nav_live(item.event_room_id,item,'abs')"
					:style="{backgroundImage:  'url('+item.url+')', backgroundSize:'100%', position:'relative'}">
					<wx-open-launch-weapp style="position: absolute; top: 0, left: 0;bottom:0;right:0;width: 100%;height: 100%; opacity: 0.3" v-if="item.appid" id="launch-btn" id="launch-btn" :path="item.pagepath" :username="item.appid">
						<script type="text/wxtag-template">
							<div style="position: absolute; top: 0, left: 0;bottom:0;right:0;width: 100%;height: 100%; opacity: 0.3;" />
						</script>
					</wx-open-launch-weapp>
				</view>
				<image v-else class="image" :src="item.url" @click="nav_live(item.event_room_id,item,'abs')"></image>
			</swiper-item>
		</swiper>

示例代码3：按钮

<view class="orderBtn" v-show="item.is_join==1" @click="enroll(item,idx)"
								:class="item.liveStartStatus==1?'btn1':'btn2'">
								<wx-open-launch-weapp id="launch-btn" :username="item.appid" :path="item.pagepath">
									<script type="text/wxtag-template">
										<style>.btn { width: 100%;height: 100%;font-size:13px;color: #fff;line-height: 25px; }</style>                              
										<div class="btn">{{item.btnTxt}}</div>            
									</script>
								</wx-open-launch-weapp>
							</view>