Bonnie(大宝)-优快云博客

原创微信小程序 --首页广告位缩放

wxml<view class="shadow" wx:if="{{showShadow}}" catchtap="close" catchtouchmove="return"></view><view class="image {{activite}}" wx:if="{{showImage}}"></view><view class="floatImage" wx:if="{{showImageSmall}}"></view&gt.

2021-02-05 18:24:09 405

原创微信小程序 -- 通知消息横向滚动 -- 无缝连接1

微信小程序 – 通知消息横向滚动 – 无缝连接1wxml<view class="notice"> <view class="left"><view>通知公告</view></view> <view class="right scrollx"> <view class="notice-text-box"> <text class="notice-text {{ismo

2021-01-28 19:03:21 1521 2

原创关于前端自主实现列表渲染懒加载

关于前端自主实现列表渲染懒加载直接上代码直接上代码<scroll-view scroll-y bindscroll="scroll" bindscrolltolower="toLower"><block wx:for="{{arr}}" wx:key="index" wx:if="{{index<currentIndex*10}}" > </block></scroll-view>js:toLower(){ let currentIn

2021-01-28 11:15:58 543

原创行高决定省略行数

行高决定省略行数上菜功能点1.通过计算font-size and line-height 与当前盒子的height相比较，大于height就显示展开按钮，小于的话，根据传入的ifHidden的参数来控制是否可以收起子组件内容wxml<view class="box" style="background:rgb({{bgColor}});"> <view class="limit-row" style="font-size:{{fontSize}}rpx;line-

2020-12-09 15:41:00 127

原创导航栏滚动居中

导航栏滚动居中wxml<view class="content"> <scroll-view scroll-x="true" scroll-with-animation style="width:100%;" class="ul" scroll-left="{{scrollLeft}}"> <view wx:for="{{8}}" wx:key="index" class="li strategy-tab {{currentIndex == index ? '

2020-12-07 19:10:48 356 1

原创带圆角 -- 气泡对话窗

带圆角 – 气泡对话窗上菜重点1.改变三角形的border-color:transparent transparent #f3961c transparent;left:50%; transform: translateX(-50%);top:-20px; border-color: #f3961c transparent transparent transparent; left:50%; transform: translateX(-50%);bottom:-20px;b

2020-12-07 17:40:59 180

原创微信小程序 progress 进度条内部圆角及内部条渐变色

微信小程序表格微信小程序progress进度条内部圆角及渐变色html: <progress percent="80" border-radius='5' stroke-width="5" activeColor='#FE564D'/>css:.wx-progress-inner-bar { border-radius: 8rpx !important; background: linear-gradient(to right, rgb(71, 187, 254,1), rg

2020-10-09 18:52:18 2132

原创微信小程序自定义模态框，禁止底部页面滚动事件

1. 添加自定义的模态框后，在上面的模态框上滑动，底部的页面也会跟着滑动！怎么解决解决方法：只要在你的模态框上添加 preventD(){return}

2020-06-29 15:53:20 587

原创关于微信小程序iOS端时间格式兼容问题

关于微信小程序iOS端时间格式兼容问题在自己开发中，当时间格式为 2020-06-29 08:00 ，需要将时间转为其他格式时，Android端转换成功，iOS端报错或是转为NaN。解决方法：1.当时间格式为 2020-06-29 08:00 先用 .replace(/-/g, ‘/’) 替换掉 “-”2.再通过new Date()去处理你想要处理的时间格式。3.或者使用自定义时间格式方法，获取你想要获得的时间格式，看下面：// 自定义时间格式 yyyy-MM-ddfunction date

2020-06-29 10:42:29 1151

原创小程序的时间轴（简约版）

时间轴wxml<view class="time-axis"> <view class="ivestment-c"> <view class="ivestment-i" wx:for="{{3}}" wx:key="index" wx:for-item="item" wx:for-index="index"> <view cl...

2020-05-06 18:56:12 885

原创 Vue中左右滑动的头部导航（极简）

Vue中左右滑动的头部导航<template> <div class="about"> <div class="idd"> <ul> <li :class="{'active':indexTap == index}" v-for="(item,index) in lists" :key="ind...

2019-10-31 15:24:28 2278

原创前端大白 -- 小程序之多选弹窗组件

多选弹窗组件案例展示:图1:图2:图3:子组件HTML代码:<template> <view class="popupShow">  <view class="popupClick" @click="onPopupShow()"> <slot></slot&gt...

2019-08-01 13:57:41 2125 1

原创前端大白 -- 小程序之自行封装轮播图组件

小程序之自行封装轮播图组件案例展示:先上代码:子组件HTML部分:<view class="ul"> <view :class="direction == 'column' ? 'columnLi' : 'li'" id="liId" :animation="animate"> <image id="imageId" @touchend="tou...

2019-07-24 18:12:32 561

翻译关于小程序和APP的瀑布流组件的封装

关于小程序和APP的瀑布流组件的封装运行效果 :不多说上代码 :<template> <view class="water-fall-flow"> <scroll-view class="content" :style="{height : contentH + 'px'}" scroll-y="true" @s...

2019-07-23 14:02:54 289

weixin_40199449的博客