小程序的成长之路
小程序开发 css学习使用
xiyunmengyuan
这个作者很懒,什么都没留下…
展开
-
swiper实现老虎机抽奖
页面效果组件代码1、组件名draw.vue<template> <view style="width: 100%;height: 100%;"> <view class="draw-main"> <draw-item ref="drawItem1" :interval="200" :duration="300" :drawImg="drawImg" style="width: 30%;height: 86%;" :index="drawIndex原创 2021-04-06 13:10:27 · 1071 阅读 · 2 评论 -
uniapp 将svg转换为css可用的图标字体
1.转换平台链接 https://icomoon.io2.转换步骤2.1 打开https://icomoon.io/ 后,点击右上角登录旁边的icoMoon App进行登录2.2 具体流程图2.3 代码配置.将style.css和fonts文件放到项目的静态资源文件下并全局设置引入<i style="font-size: 48upx;position: absolute;left: 20rpx;color: #fff;" class="melyshop-melyshop-uniE90原创 2020-07-27 11:21:13 · 2008 阅读 · 0 评论 -
微信公众号 网页支付的实现
1、支付js引用添加 <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>2、具体的实现流程:1.首先获取到支付订单号2.根据支付订单号获取支付参数3.通过JavaScript调用getBrandWCPayRequest接口,发起微信支付请求,用户进入支付流程4.用户成功支...原创 2020-04-22 13:59:46 · 597 阅读 · 0 评论 -
微信公众号 网页授权实现
绪论:如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。关于网页授权回调域名的说明1、在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改授权回调域名。请注意,这里填写的是域名(是一个字符串),而不是URL,因此请勿加 htt...原创 2020-04-22 13:43:06 · 952 阅读 · 0 评论 -
uniapp canvas小程序分享海报的实现
小程序中经常会有海报的生成,为了使用方便就自己封装了js文件方便调用文件名为creatMaterialImage.js海报图效果如下:1,海报生成方法的具体实现// 用canvas生成分享图片,返回srcconst createShareImg = function(options, that) { return new Promise(function(resolve, reje...原创 2020-04-10 15:25:09 · 4714 阅读 · 2 评论 -
uniapp subPackages分包加载配置
1、 分包加载配置分包加载配置,此配置为小程序的分包加载机制。subPackages 节点接收一个数组,数组每一项都是应用的子包,其属性值如下:注意:subPackages 里的pages的路径是 root 下的相对路径,不是全路径。微信、百度小程序每个分包的大小是2M,总体积一共不能超过8M。支付宝小程序每个分包的大小是2M,总体积一共不能超过4M。分包下支持独立的 static...原创 2020-04-09 14:29:34 · 23670 阅读 · 1 评论 -
uniapp 自定义时间选择组件
1.自定义时间组件的效果2.组件的实现代码组件文件名timeChose.vue具体代码<template> <view> <uni-popup ref="popcash" type="bottom" @change="popChange"> <view class="pop_phone" style="height:550upx ...原创 2020-02-25 12:01:23 · 6989 阅读 · 7 评论 -
微信小程序实现瀑布流实例
瀑布流的效果图如下:1.wxml中的代码如下<!--pages/lsittest/listtest.wxml--><view class="containers"> <view id="left"> <view style="margin-bottom:20rpx;" wx:for="{{leftList}}" wx:key> ...原创 2019-12-12 16:25:25 · 2453 阅读 · 2 评论 -
Echarts介绍及常用设置的使用
ECharts是一个纯JavaScript图表库,底层依赖于轻量级的Canvas类库ZRender,基于BSD开原协议,是一款非常优秀的可视化前端框架。1、下载地址官网地址 :https://www.echartsjs.com/zh/index.html2、Echarts的引入npm的安装方法: npm install echarts --save3、属性的简单使用及自定义样式3.1、...原创 2019-11-09 11:42:09 · 447 阅读 · 0 评论 -
uniapp -- 页面顶部内容悬浮的完美解决方法
只需要在要悬浮的顶部区域外侧包裹一层标签 设置如下属性 该区域将会随着页面的滚动自动悬浮在顶部。.page_header {position: sticky;width: 100%;left: 0;right: 0;/* #ifdef H5 /top: 44px;//适配网页/ #endif // #ifndef H5 /top: 0;//适配其他平台/ #endif */...原创 2019-10-16 17:22:22 · 14790 阅读 · 1 评论 -
css 限制文本单行或多行显示 超出省略的实现方法
限制文本单行显示的css代码:overflow: hidden; //属性规定当内容溢出元素框时发生的事情 超出区域隐藏white-space: nowrap; //属性设置如何处理元素内的空白 nowrap规定段落中的文本不进行换行text-overflow: ellipsis; //属性规定当文本溢出包含元素时发生的事情。 ellipsis 显示省略符号来代表被修剪的文本...原创 2019-10-16 09:02:30 · 694 阅读 · 0 评论