展开

关键词

------日历

预览:? 图wxml部分代码: {{ year }} - {{ month}} {{ item }} {{ item }} wxss部分代码:.box1 .dateBox{ width: 100%; height

68230

收起

前言:本章说下文字内容的与收起的实现,要实现这么一个:当收起的时候隐藏并显示省略号,当的时候显示全部文字。 GitHub:https:github.comEwall1106miniProgramDemo 先看下图: ? 收起1、结构样式(1)首先我们定义一下html结构: 标题标题 我所有的自负皆来自我的自卑,所有的英雄气概都来自于我的软弱。嘴里振振有词是因为心里满是怀疑,深情是因为痛恨自己无情。 .content.on { display: block; text-overflow: clip; overflow: visible;}4、结这样我们就实现了文本框的收起,当收起的时候显示省略号并隐藏 当然,不仅仅是文字的收起与,里面放其它的内容也是可以的,根据需求来应对了;还有就是可以加个动画之类的完善一下交互,感兴趣的朋友可以自己鼓捣。

1K40
  • 广告
    关闭

    云产品限时秒杀

    云服务器1核2G首年38元,还有多款热门云产品满足您的上云需求

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    DIV收缩

    div收缩代码 * { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif function $D(){ var d=$(classContent); var h=d.offsetHeight; var maxh=300; function dmove(){ h+=50; 设置层的速度

    7630

    标签页切换

    标签页切换:image.png.wxml 达叔 达叔 达叔 welcome come to 达叔 welcome come to 达叔 welcome come to 达叔 .wxss.tab e.target.dataset.current) { return false; } else { that.setData({ currentData: e.target.dataset.current }) } }}) :image.png.wxml 个人 设置 达叔 .wxsspage { background-color: rgba(239, 239, 240, 1);} .text { position: absolute selected: true }) }, selected1: function (e) { this.setData({ selected: false, selected1: true }) }}) 达叔生 90后帅气伙,良好的发习惯;独立思考的能力;主动并且善于沟通 简书博客: 达叔生 https:www.jianshu.comuc785ece603d1

    60130

    — 实现左滑删除

    前言:实现这个有几种方式,大家可以看看这篇文章从京东购物,印象笔记看左滑交互的实现 ,而我们就使用最新的方案,就是用movable-view来实现左滑删除的。 GitHub:https:github.comEwall1106miniProgramDemo 首先上图看下最终:? 实现左滑删除1、movable-area基本概念大家仔细去看看官网的文档后再来看我写的这篇文章可能会更好理解。 部分截图来自于官网OK,这就是关于movable-area组件的一些基本概念的介绍,接下来我们实践实践。 3、结这样,我们的页面基本结构就实现了,到这里,我们还有这么几个问题需要解决完善:事件的监听,当超过最大滑动距离时,让movable-view提供一个非常流畅的过界动画和回弹;设置阈值,往左移动超过阈值则显示删除按钮

    1.7K20

    — 实现左滑删除

    前言:这章我们为movable-view添加点击事件,完善左滑。 拖动过中触发的事件,event.detail = {x: x, y: y, source: source},其中source表示产生移动的原因,值可为touch(拖动)、touch-out-of-bounds this.setData({ x: this.x }); } else { this.x = 0; this.setData({ x: this.x }); } }};上面有几行代码很少但却是整个实现左滑删除的核心代码 = -92; this.setData({ x: this.x }); } else { this.x = 0; this.setData({ x: this.x }); } }};} 至此,我们的用实现左滑删除的基本上就全部实现了 ,如你是用原生发的话,其实原理都是一样的,所以实现的方式也差不多。

    66220

    图片左右摆动

    先看,实现一个图片左右摇动,在一般的H5宣传页,商家活动页面我们会看到这样的动画,的动画不同于css3动画,是通过js来完成的,其实步骤很简单,首先创建动画实例,再调用实例来描述动画, 先看如下:?

    52630

    微信|旋转动画

    问题描述 在中,如可以用一个动画现一句话或一段文字,会比普通文字呈现更具吸引力,这不仅是体现更多样的文字,更是突出这段文字的一个方法。 那么接下来就来看一下如何实现一个文字旋转的动画吧。图:?解决方案 1 wxml:这部分很容易实现,只需要设置一个点击旋转标签button以及对一条需要旋转的文字进行数据绑定即可。 (2)timingFunction:“运动”的方式,本例中的“linear”代表动画以匀速的来呈现。 (3)delay:多久后动画始运行,也就是动画延迟始的时间translate(100,-100)向X轴移动100的同时向Y轴移动-100。 ,它可以实现很多样很丰富的形式,本篇只是一个基础的动画演示,后续将介绍更丰富的动画,欢迎持续关注。

    70220

    微信全文

    最近需要做一个示部分文字然后全文的功能,要求如下:1、最多显示三行,文末使用省略号表示2、文字显示1行,2行及文字不满三行时不要显示全文按钮解决方案:最始设置显示4行,查询节点获取文字高度, 如于4行的高度,不显示,如不是,设置显示3行,然后显示全文按钮。 1、为啥始显示4行? 我没找到判断文字刚好3行的方法。。。所以只能始显示4行,这样如需要显示全文,页面基本不会抖动。。。 ) 获取屏幕宽度 this.data.screenWidth = res.screenWidth }, }) this.setData({ text1: 我不是懒,我是享受不作为, text2: 微信全文 this.setData({ showTotal3: true, showTotalBtn3: false }) },})设置130为临界值,是试了3行基本不超过120rpx,4行基本大于140rpx,取了个中间值页面

    80410

    动画animation向左移动

    今天在家做一个私活,类似于淘宝的筛选功能,微信商品筛选,侧方弹出动画选择页面,研究了一下的动画相关的文档,于是又get到了一个新的技能,动画animation向左移动官方参考文档:https:developers.weixin.qq.comminiprogramdevapiwx.createAnimation.html写了一个简单的demo,今天太晚了,就不继续写了 ,后续会继续写一个关于点击筛选按钮,从右往左弹出一个遮罩选择层的。 { this.animation.translate(-50, -1).step() this.setData({animation: this.animation.export()}) }, })如下 呈现很简单,只是一个例子,就没有作过多的修饰,用到实际项目里,当然要写一些详细的样式了。 原文作者:祈澈姑娘 技术博客:https:www.jianshu.comu05f416aefbe1

    1.2K10

    微信左右滑动切换图片酷炫(附

    门见山,先上吧!感觉可以的用的上的再往下看。心动吗?那就继续往下看!  先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了。 1 2 3 4 5 6 {{item.proTitle}} 7 {{item.proDec}} 8 ¥{{item.proPrice}} 9 查看详情 >10 11 12 13 ```  做该样式就不多说了 (的时候,注意class的命名,尽量不要使用层级嵌套,所以class取名的时候要注意唯一性)View Code     js部分:该基于的组件 scroll-view 发的,利用bindscroll true; that.setData({ proList: that.data.proList, giftNo: this.data.proListcurIndex.id }); },ps:有时候一些酷炫的其实实现起来非常简单 ,建议发前先理清实现思路,虽然整个文章言简意赅,能看懂就自然懂,乐在分享本文作者:高丰鸣 原文地址:http:www.wxapp-union.comportal.php?

    2.5K60

    JAVA实战」视频示页发(52)

    这次说下,的视频组件,图标放置 关联到了之前没有说过的一个组件cover-view。 PS:如我们把cover-view中的cover去掉的话,我们这个view肯定是无法保存在我们的视频里面的。下面的我们来一起实现里面的功能。

    26240

    登录按钮遮罩浮层

    第一次登陆的时候会有一个登录按钮遮罩浮层提示去授权登录2:在弹出的授权框里,拒绝授权按钮的时候,界面的数据没有办法加载出来,允许授权的时候,界面就能渲染从后端拿过来的数据3:判断是否授过权(判断是第一次登录还是第n次),如用户第一次已经登录授权 ,后面继续登录的时候悬浮框就不会再出现如下:? 技术博客:https:www.jianshu.comu05f416aefbe1 90后前端妹子一枚,爱编,爱运营,爱折腾。长期坚持总结工作中遇到的技术问题。

    80920

    微信仿APP section header 悬停

    美好的心情.jpeg很多APP都有这么一个,列表头在滚动到顶部时会悬停在顶部,比如在iOS发中UITableview设置 style 属性设置为 Plain ,这个tableview的section 那么我们怎么在微信也实现这么一个呢? rebeccapurple;} .section-cell { height: 180rpx; width: 750rpx; background-color: gold; margin-top: 10rpx;}简单列表 section header 距离 ‘当前顶部’ 距离 sectionHeaderLocationTop: 0, 页面滚动距离 scrollTop: 0, 是否悬停 fixed: false },此时我们需要的就实现了 ‘当前顶部’ 距离 sectionHeaderLocationTop: res.top + that.data.scrollTop }) }).exec()加上此时页面滚动的距离,则能保证我们预期的出现

    90220

    — 实现左滑删除(列表)③

    然后进行删除,很简单不多说,看代码:handleDelete(idx) { this.list.splice(idx, 1); this.setData({ list: this.list });}3、结这就是我们实现左滑删除的全部内容了 ,利用了的movable组件实现了大部分的功能,关于js主要是在处理列表渲染的时候,这里是个坑,其他就没什么难点了,看看最后的图吧:? 最终

    49830

    -渐入渐出动画实现

    “在做列表示的时候,接到了一个需求。需要在列表示的时候加上动画。在此献上动画的教。” 前言动画需要在进入列表页的时候,依次示每一条卡片,在示完成后需要隐藏掉当天之前的卡片。设计视频如下图:?实现思路实现该动画,首先需要给每个卡片添加一个css动画。 因为每个卡片的显示是有时间间隔的,以及考虑到示完成后的隐藏,所以动画需要用js动态去添加。 在看了微信发文档后,发现微信提供了Animation的一个动画对象,具体看了里面的参数后发现,是可以实现需求上的的。 transData.animation = that.app.slideupshow(that, 1, (i + 1) * 10, down) } }结束语理解思路并按着步骤做就可以跟设计视频中的动画风格基本保持一致,以上就是对中实现渐进渐出的动画的办法啦

    1K30

    微信实现星级评分

    微信像下面图的评分功能是怎么做的?逻辑是什么样的? =0全灰色星星:直接else就好了代码实现: 微信视频教:https:www.3mooc.comfrontcouinfo205

    1.4K20

    微信----canvas实现刮刮乐

    图?设计流? 设计思路canvas设置背景图,作为中奖图片;在canvas上绘制刮的灰色涂层;通过绑定的事件,清除对应区域的涂层;最后判断涂层清除区域是否超过设置的可见百分比,如超过则全部涂层清除,否则不清楚。 y1, this.r, this.r); this.ctx.draw(true); }提供的其他实现思路方法一:本文提供的方法是将中奖图片作为背景设置给canvas,然后清除canvas涂层来实现刮刮乐

    44330

    App Clips技术解析和

    北京时间2020年6月23日,苹在一年一度的WWDC上正式宣布了苹官方“” App Clips。本文带你来了解App Clips,分析其优缺点,并对前景做望。 类似的还有一些业务导向的公司,没有实力和能力研发App来抓住移动互联网的风口,在微信(或其他)诞生之前,唯一的出路就是找个外包低成本、快速的发一款Web App。 App Clips的技术优缺点(vs 微信)优点操作路径更短 NFC场景下,用户可以在锁屏下激活App Clips,打,使用Apple Pay完成下单,操作更便捷。 可以认为今年始Apple强制要求App 引入Apple Pay是在为App Clips铺路,为了达到极致体验。用户体验更好 相信不少iOS微信用户都遇到过崩溃需要重新打的情景。 场景会更丰富 相信未来Cilps的场景会不局限于App,流和体验优化到一定度会向手表、眼镜和其它IoT设备扩。而微信对这些设备的扩取决于苹是否能放相应的API。

    99730

    微信实现标签页滑块

    微信实现标签页滑块 image.png案例一完整代码:wxml: 留言 活动 更多 wxss:Page { background-color: #f1f1f1;} .swiper-tab function() { }, onHide: function() { }, onUnload: function() { },})json:{ navigationBarTitleText: 消息}案例二:

    85220

    相关产品

    • 小程序安全

      小程序安全

      小程序安全针对小程序不同业务场景提供包括小程序安全加固、小程序安全扫描、小程序渗透测试功能,通过分析仿冒程序,挖掘风险漏洞、保护核心代码等方法保护小程序业务安全、数据安全,降低客户业务风险和资金损失。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券