![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序
@SIMIN
一份耕耘,一份收获
展开
-
微信小程序 类似点餐系统功能
<!--index.wxml--><view class="container"> <scroll-view> <view bindtap="touchOnGoods" wx:key="keys" class="goods" hover-class="goods_hover" wx:for="{{goods_list}}"> <image src="https://dss0.bdstatic.com/70cFuHSh_Q1Yn.原创 2020-06-04 17:51:10 · 402 阅读 · 0 评论 -
微信小程序 picker组件自定义选择时间粒度
一个类似用车时间的粒度选择功能:如图所示代码如下://wxml<picker class='address-detail' mode="multiSelector" bindcolumnchange="bindcolumnChange" bindchange="bindChange" value="{{dateIndex}}" range="{{dateArray}}"> <view class="picker"> <view class="flex原创 2020-06-04 16:35:57 · 619 阅读 · 0 评论 -
微信小程序 手指拖动切换下一张
效果图:index.wxml:<view class="mask-movable"> <image style="position:absolute;z-index:-1;height: 600rpx; width: 492rpx;" mode='scaleToFill' src='{{img2}}'></image> <movable-area wx:if="{{hiddenimg}}" style="height: 160vh; widt原创 2020-05-25 18:19:32 · 386 阅读 · 0 评论 -
小程序卡片轮播效果
如图上效果:实现代码如下:index.wxml<view class="container"> <swiper class="imageContainer" bindchange="handleChange" previous-margin="50rpx" next-margin="50rpx" circular autoplay> <block wx:for="{{3}}" wx:key="{{index}}"> <swi..原创 2020-05-25 18:04:05 · 546 阅读 · 0 评论 -
小程序 隐藏scroll-view滚动条
在wxss添加:::-webkit-scrollbar{width: 0;height: 0;color: transparent;}原创 2019-12-13 18:39:16 · 120 阅读 · 0 评论 -
微信小程序—多图片上传
小程序多图片上传,我们封装成一个自定义组件,方便后续开发调用,代码如下:<view class="weui-uploader upimg"> <view> <view class="weui-uploader__files"> <block wx:for-items="{{files}}" wx:key="{{index}}"...原创 2019-06-06 15:26:32 · 582 阅读 · 0 评论 -
微信小程序中类似后台添加商品规格的设置
类似于这样一个需求,添加一个商品规格属性的设置(增加,编辑集成一个页面)这是以下代码所实现的商品属性规格的数组:思路如下:<form bindsubmit="complete" report-submit="true"> <block wx:for="{{spec_arr}}" wx:key="{{index}}"> <view ...原创 2019-06-06 14:25:30 · 3631 阅读 · 0 评论 -
解决ios打开微信小程序下拉页面出现空白
在page .json中进行配置,但注意如果页面内容超出页面本身高度则不能用disableScroll:true;否则会导致页面无法滚动.然而你可能也会遇到加上之后无效,则:disableScroll的优先级小于enablePullDownRefresh,因此如果app.json里是enablePullDownRefresh:true,那如果只是在page.json中加上disable...原创 2019-05-30 17:13:01 · 4948 阅读 · 0 评论 -
文本超出几行显示省略号
<view class='content'> <view class='c_text' id="box" style='-webkit-line-clamp:{{lineclamp}}'> 本酒店好霸道个地方不化的风格股的方法反反复复部分 地方改变地方vadfvdfjfbiiiuioulkdaflgvbdfgbvf 胡椒粉IDGV不vbfudio...原创 2019-03-01 17:53:02 · 224 阅读 · 0 评论 -
微信小程序—更改默认单,复选框样式
/*更改复选框的样式 */(小程序默认不让更改)未选中的 背景样式checkbox .wx-checkbox-input{border-radius: 8rpx;width: 28rpx;height: 28rpx;margin: 0 15rpx 4rpx 0;border-color: transparent;background: transparent;}...原创 2019-03-01 16:44:33 · 1105 阅读 · 2 评论 -
微信小程序—利用toggle实现列表的显示和隐藏
如图所示:如果想出现这种点击哪个元素让哪个元素显示,在点击隐藏而且点击列表之间互不影响的效果,可以利用在循环的列表上添加一个toggle键值作为开关在data里面定义一个数组,如图(仅是测试数据)在onload里面加上toggle开关在列表上绑定事件然后进行逻辑编写这种方法类似于多选还有一种效果就是点击其中一个其他都恢复成原样还用上面的列表,这个时候...原创 2019-03-01 17:20:43 · 1581 阅读 · 0 评论 -
微信小程序—文字无线轮播、文字跑马灯效果
如图效果直接上代码,一看就懂啦~ 这里需要注意的是在小程序上style样式里面translate的单位rpx会无效,写成translateX( 空格 20rpx)就可以了<view class="warn"> <image src="{{IMG_URL}}/mod/coupon/assets/img/scenic/laba.png" style="width:...原创 2019-03-01 17:30:35 · 1648 阅读 · 0 评论