微信小程序-自定义级联选择框显示与隐藏效果（淡入淡出，滑入滑出）

sxw-xxxx

于 2020-07-14 14:41:14 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签：小程序 javascript css css3 html5

本文链接：https://blog.csdn.net/weixin_42252002/article/details/107336417

本文介绍如何在微信小程序中创建自定义级联选择框，展示使用JavaScript、CSS（包括CSS3）和HTML5实现的淡入淡出及滑入滑出动画效果。

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

在这里插入图片描述

wxml

	<!-- 添加data-type 是为了防止事件冒泡 catch:tap事件捕捉 就是为了方式事件向下冒泡 -->
    <view class="info-item" catch:tap="changeShopTypeStatus" data-type='changeShopTypeStatus'>
      <view class="item-name" catch:tap="changeShopTypeStatus" data-type='changeShopTypeStatus'>
        类型
      </view>
      <view class="item-value item-imgedit" catch:tap="changeShopTypeStatus" data-type='changeShopTypeStatus'>
        {
   
   {
   
   shopInfo.shopType}}
      </view>
    </view>

	<!-- 选择框 -->
  <view class="dialog-layout" animation="{
   
   {layoutAnimation}}" hidden="{
   
   {typeStatus}}" bind:tap="changeShopTypeStatus" data-type='changeShopTypeStatus'>
  	<!-- 同样的catch:tap='none'是为了防止事件冒泡出发layout的事件 -->
    <view class="dialog" animation="{
   
   {dialogAnimation}}" catch:tap="none">
      <view class="dialog-title">
        <view class="dialog-cancel"