现在位置: 首页 > 微信小程序
2020年02月18日 web前端 ⁄ 共 1619字 评论关闭

微信小程序canvas截取任意形状的实现代码 最近在研究拼图验证码实现,需要对图片的部分模块进行特殊形状切割出一小块,明白后原来是如此简单,第一步就是将所有绘制的形状用线勾出(直线.弧线.贝塞尔曲线都可以)形成闭环,第二步就是切割绘制,第二步不麻烦,麻烦的只是第一步,需要一些计算,所以会在以后,尽力的多保存一些特殊形状的方法. 比如: 代码 drawPic(x,y,r){ // const ctxBackground = wx.createCanvasContext(‘canvasBackground’) const ctxBackgrou

阅读全文
2020年02月18日 web前端 ⁄ 共 2353字 评论关闭

微信小程序全选多选效果实现代码解析 这篇文章主要介绍了微信小程序全选多选效果实现代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图: wxml代码: <view class="memberList"> <view class="allSelect_box" bindtap=’selectAll’> <checkbox class="checkbox" checked="

阅读全文
2020年02月18日 web前端 ⁄ 共 980字 评论关闭

微信小程序swiper实现文字纵向轮播提示效果 摘要 小程序顶部总会看到滚动的通知栏,一般单条的都会用跑马灯去实现,但面对多条的内容,就需要用轮播去实现,轮播自然是swiper了,查了查,还真有vertical这个属性,swiper真好用. 效果 体验 代码 wxml <view class="swiper-view"> <swiper class="swiper_container" vertical="true" autoplay="true&quot

阅读全文
2020年02月18日 web前端 ⁄ 共 1026字 评论关闭

微信小程序如何实现点击图片放大功能 这篇文章主要介绍了微信小程序如何实现点击图片放大功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 WXML: <view class=’imgList’> <view class=’imgList-li’ wx:for=’{{imgArr}}’> <image class=’img’ src=’{{item}}’ data-src=’{{item}}’ bindtap=’previewImg’></i

阅读全文
2020年02月18日 web前端 ⁄ 共 2376字 评论关闭

微信小程序仿淘宝热搜词在搜索框中轮播功能 摘要 逛淘宝的时候,发现淘宝搜索框中一直在垂直方向上轮播热搜提示词,觉得这是个不错的设计,除了能让空间更充分使用,也能让页面更有动感,最重要的是能够增加搜索框的使用频率.就在小程序中试着实现实现. 效果 体验 实现思路 思路比较简单,主要是两点, 1:input处于热搜提示词上层,用z-index实现 2:热搜词轮播用swiper实现,方向为vertical 3:在input聚焦时获取swiper当前值,设置为placeholder 4:将swiper隐藏 代码 已封装成组件 组件代码: wxs

阅读全文