咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动

这篇具有很好参考价值的文章主要介绍了咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

由于本着只学习微信小程序的目的,上面的几篇博文都是跟着黑马程序的课程走的!后面的就讲解uni-app的实验呢!一个人的精力是有限的,于是换了们课程继续深造微信小程序!!!

   

以下是在 .wxml中的一些

 以下是view三层嵌套的快捷操作方式!

.box>.inner>.row

最外层是 class类型为box的view  其次是class类型为inner的view ,最里面的是class类型为row的view!

咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动,微信小程序

 咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动,微信小程序

view>view       实现view内嵌套view

 咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动,微信小程序

 咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动,微信小程序

 .inner  创建了一个class为inner     的view咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动,微信小程序

 咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动,微信小程序

下面是微信小程序<view>组件中的属性hover-class的应用! hover :盘旋,徘徊,处于不稳定的状态,上下波动,左右摇摆!

点击前和点击后颜色变化不同!

点击前是 class=“name” 的图框,点击后是 hove-class ="bucuo“的图框!!!

咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动,微信小程序

 咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动,微信小程序

 咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动,微信小程序

emmet语法的使用,和以后得加强了解!

.row{$}*8是   emmet语法规则,这个规则其实学习起来又是一个知识点!!! 

咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动,微信小程序

 咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动,微信小程序

下面的演示的是左右滑动的 方格

咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动,微信小程序

实现滑块移动,

.myScroll类 属于大类

包含其中的row类

row类中使用display: line-block  将保留元素的高度和宽度!

.myScroll类中的white-space 是元素到了显示框的边上也不会自动换行

具体网上搜索 css中的inline-block  和white-space的介绍!!!

咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动,微信小程序

下面演示的是上图中文字textd只能在灰色区域移动!!!

在wxml中 写下style类型中文段,竟然等同于在wxss中写的代码

这点需要搞懂!!!

咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动,微信小程序

 咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动,微信小程序

在.wxml中写下的这段代码
<movable-area style="width: 400rpx; height: 400rpx; margin: 50rpx;background-color: #ccc;">
<movable-view direction="all" x="20" y="40">
textd
</movable-view >
</movable-area>
在wxss中的代码

movable-area {
  height: 400rpx;
  width: 400rpx;
  margin: 50rpx;
  background-color: #ccc;
  
}

有A,B,C盒子,  C是B盒的子盒!用<root-protal>将C盒分离出来,不受B盒一些因素的限制!!!

wxml中out这个大盒子中盒子box1 ,box2 并级。   盒子box2中含有mask盒子

这里使用<root-protal>这个属性将box2中的盒子mask单独分离出来呢,

前提  :    box1的 z-index : 10      box2的z-index : 9   

                  box2中mask 默认是可以覆盖box2

但由于 box1中的z-index大些,是覆盖不了box1的!

这里提供两种解决办法: 1.将box2的z-index提高  2.将mask 用root-protal单独分离出来,变成一个自由的子树,不受管控 按着自己的想法去搞!!!

咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动,微信小程序

 咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动,微信小程序

 咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动,微信小程序

咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动,微信小程序文章来源地址https://www.toymoban.com/news/detail-673703.html

到了这里,关于咸虾米之一些快捷方式的操作,一行方块的左右滑动,方块在一区域内的任意移动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity:鼠标【上下左右滑动时】控制相机【左右张望】和【上下抬头】

    相机旋转,看着是小事,但是却关系到用户的直观体验。旋转对了母慈子孝,旋转错了则翻江倒海。 鼠标左右移动时,控制相机左右转动 鼠标上下移动时,控制相机抬头低头 你可以在GPT里提问,他的回答也很给力,能转,但是都不符合人体的看东西的特点。 后来还是的自己

    2024年02月10日
    浏览(60)
  • 小程序商品分类页面滑动左右联动

    系列文章目录 前言 一、vtabs是什么? 二、使用步骤 1.json引入 2.wxml中使用 3.js中代码 总结 商品分类页面,左边分类及右边商品左右联动 因为微信小程序scroll-view没有h5锚点控制联动,并且需求是根据整个页面的滚动条来控制联动,所以使用了页面滚动事件onPageScroll来获取页面

    2024年02月12日
    浏览(46)
  • vue + element 实现鼠标左右滑动效果

    我用了element中的走马灯+overflow-x: auto; html (复制后格式化一下) js this.$refs.entrance.setActiveItem(index); 手动切换当前展示的索引

    2024年02月04日
    浏览(36)
  • Vue3自定义简单的Swiper滑动组件-触控板滑动&鼠标滑动&左右箭头滑动-demo

    代码实现了一个基本的滑动功能,通过鼠标按下、鼠标松开和鼠标移动事件来监听滑动操作。 具体实现逻辑如下: 在  onMounted  钩子函数中,我们为滚动容器添加了三个事件监听器: mousedown  事件:当鼠标按下时,设置  control.isDown  为  true ,记录鼠标起始位置  control.

    2024年02月13日
    浏览(50)
  • Android——禁止ViewPager的左右滑动功能实现

    Android——禁止ViewPager的左右滑动功能实现 在Android开发中,ViewPager是一种常用的滑动控件,用于实现页面的左右切换效果。然而,在某些场景中,我们可能需要禁止ViewPager的左右滑动功能,只允许通过其他方式进行页面切换。本文将介绍如何在Android中实现禁止ViewPager左右滑动

    2024年02月06日
    浏览(46)
  • uniapp 左右滑动切换页面并切换tab

    实现效果如图 要实现底部内部的左右滑动切换带动上方tab栏的切换,并且下方内容要实现纵向滚动 ,所以需要swiper,swiper-item,scroll-view组合使用 tab栏部分  tab栏点击切换,需要重新调取数据 下方内容部分 滑动切换,改变上方tab栏状态,并重新调取数据 以上即可实现页面左

    2024年02月13日
    浏览(49)
  • android:RecyclerView交互动画(上下拖动,左右滑动删除)

    @Override public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) { //监听侧滑;1.删除数据,2.调用adapter.notifyItemRemoved(position) mMoveCallback.onItemRemove(viewHolder.getAdapterPosition()); } //改变选中的Item @Override public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) { //判断状态 if

    2024年04月12日
    浏览(48)
  • 微信小程序———同一页面内左右滑动切换内容显示

    一、微信小程序事件  由于首先介绍一下微信小程序中的事件,可选择快速略过或者直接进去之后的重点内容 一、什么是事件 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对

    2024年02月03日
    浏览(73)
  • flutter在windows系统上实现左右水平滑动问题

    在个问题在github也有记录:https://github.com/flutter/flutter/issues/105095 就是flutter使用listview等可以滑动的组件来左右滚动的时候,不能正常工作,也就是无效,所以下面大家开始讨论这个问题。 翻阅大家讨论的内容,发现有的windows11是可以正常工作的,但是需要加上一个滚动条和

    2024年01月21日
    浏览(34)
  • 小程序更多的手势事件(左右滑动、放大缩小、双击、长按)

    微信小程序提供的原生事件有:触摸开始(bindtouchstart)、移动触摸点(bindtouchmove)、触摸结束(bindtouchend)以及长按事件(bindlongtap)和单击事件(bindtap)。通过以上原生事件可设计制作衍生出更多的手势事件; 文章记录小程序中组件 “左右滑动、放大缩小、双击” 事件

    2024年02月09日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包