随笔分类 -  微信小程序

小程序 canvas(老写法) 图片切图(一张图片切成3*3 、6*6 、长宽均等)
摘要：<view class='sudoku'> <view class='canvas-box'> <canvas canvas-id='canvasIn' id='canvas' class='canvas canvas-in' style='{{canvasWH}}' wx:if='{{canvas 阅读全文
posted @ 2023-01-10 16:02 晨曦_yuan小海 阅读(233) 评论(0) 推荐(0)
小程序 canvas(canvas2d) 新写法画布之生成海报保存
摘要：先来张效果图 <view> <canvas type="2d" class="canvas" id="firstCanvas"></canvas> </view> <button wx:if="{{imageTempPath !=''}}" class='btn' catchtap='saveIma 阅读全文
posted @ 2022-06-21 14:42 晨曦_yuan小海 阅读(1435) 评论(6) 推荐(1)
uni 小程序 消息弹幕无限滚动
摘要：一.先来波效果图(自行拷贝代码查看) <view> <view v-for="(item,index) in dmData" :key="index"> <!-- :style="'animation-name:mymove;animation-name:mymove;animation-durat 阅读全文
posted @ 2022-02-17 14:05 晨曦_yuan小海 阅读(1133) 评论(0) 推荐(0)
微信小程序之图片频繁变化，几秒之后输出结果(适用于抽奖)
摘要：测试数据自己动手组建先上效果图(动画滚动，体现在代码定时器里) //抽奖 runLottery() { const that = this const { getLuckyBoxHomepage, classData, numType } = this.data let openOneRewardF 阅读全文
posted @ 2021-12-18 10:55 晨曦_yuan小海 阅读(177) 评论(0) 推荐(0)
微信小程序之图片无限轮播(右向左移动)
摘要：<view class="scrollbox dis-flex"> <view class="imgItem dis-flex" style="animation: {{computedAni}};"> <view class="imgFlex" style="{{item.level==0?'bo 阅读全文
posted @ 2021-12-18 10:34 晨曦_yuan小海 阅读(914) 评论(0) 推荐(0)
微信小程序之折叠面板--数据动态化、可实现多级
摘要：.cell-class{ display: block; width: 100%; border-bottom: 4rpx solid #EBEBEB; font-size:26rpx; } .kind-list-item-bd { height: 0; overflow: hidden; } .k 阅读全文
posted @ 2020-12-11 11:58 晨曦_yuan小海 阅读(865) 评论(0) 推荐(0)
微信小程序之全选与反选(点击某项数据时，再次点击，则勾选全部(改变了全选按钮只点击两次的可见效果))
摘要：//单选 select: function(e) { var that = this; var index = e.currentTarget.dataset.index; //获取当前点击的下标 var navbarActiveIndex = that.data.navbarActiveIndex 阅读全文
posted @ 2020-02-25 17:17 晨曦_yuan小海 阅读(1747) 评论(0) 推荐(0)
微信小程序之房间管理(设备开关控制)，根据房间标识，为每个房间赋值(1,开；2，关)
摘要：1 var t, c; 2 //定位当前家庭 3 for (var i = 0; i < homeList.length; i++) { 4 if (homeList[i].homeId == homeNumberr) { 5 t = homeList[i]; 6 } 7 } 8 var setio 阅读全文
posted @ 2020-02-13 16:25 晨曦_yuan小海 阅读(819) 评论(0) 推荐(0)
微信小程序之双重循环(包含左滑删除，以及数据各项处理)
摘要：1 <view wx:for="{{hommer}}" wx:for-item="item" wx:for-index="index" wx:key="{{item.id}}"> 2 <view bindtap="onTap" data-ide="{{item.id}}"> 3 <view styl 阅读全文
posted @ 2020-01-10 16:22 晨曦_yuan小海 阅读(1521) 评论(0) 推荐(0)
微信小程序之自定义导航栏（可实现动态添加）以及swiper（swiper-item）实现自动切换，导航标题也跟着切换
摘要：<view class="movie-container"> <!-- 导航栏 --> <view > <scroll-view scroll-x="true" class="navbar" scroll-left="{{navScrollLeft}}" scroll-with-animation= 阅读全文
posted @ 2019-11-24 22:10 晨曦_yuan小海 阅读(1955) 评论(0) 推荐(0)
微信小程序之页面传值并且根据产品类别（主从关系）的赋值操作
摘要：<view class="title"> <view class="titleName">{{cname}}</view> <view class="rightBorder"> <view> <text class="titleAddress">地址:</text> <text class="tit 阅读全文
posted @ 2019-11-12 18:22 晨曦_yuan小海 阅读(231) 评论(0) 推荐(0)
微信小程序之一：动态添加view（view包含picker,input）
摘要：1 <view wx:for="{{array}}" wx:key="this" class="borderContainer"> 2 <view class="borderContainer1"> 3 <view class="firstBorder"> 4 <view class="firstB 阅读全文
posted @ 2019-11-12 11:57 晨曦_yuan小海 阅读(4454) 评论(0) 推荐(0)