VUE/H5
学无止境。
菜鸟老五
证明自己,用结果说话。
展开
-
分享一个仿切西瓜的DEMO吧
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <meta http-equiv="X-UA-Compatible" content="ie=edge"> --> <...翻译 2021-12-31 15:47:16 · 216 阅读 · 0 评论 -
前端VUE图片预加载
前景:先来说一下图片预加载跟图片懒加载有什么区别:1.图片懒加载:相对于项目中的图片因为网络原因加载太慢,那么用户第一眼看到呢可能就是页面图片空白然后图片从上到下慢慢悠悠的加载出来,这个时候自定义化包括图片组件化会在加载的过程中先给出一个默认图进行显示,当我们项目中要显示的图片加载完成之后在替换掉默认显示的懒加载图片,这是一种情况,第二种情况呢就是图片加载异常显示一个默认图,处理逻辑一样,区分一下图片加载中还是图片加载完成异常的情况插入默认图就好了。2.图片预加载:相对于这种情况呢,就...原创 2021-09-10 14:29:01 · 4677 阅读 · 14 评论 -
nuxt项目以及vue项目中使用百度地图api
Question?如何在nuxt项目以及vue项目中使用百度地图api?1》省略获取百度api密钥2》新建map.js脚本/**注意nuxt项目中此脚本放在plugins目录**/if(process.browser){ !function (mapInit) { var script = document.createElement("script"); scrip...原创 2020-01-08 15:40:58 · 2557 阅读 · 0 评论 -
nuxt实现服务端渲染查看源代码显示动态接口数据
使用nuxt实现查看源代码显示动态数据:/** 通过nuxt框架实现服务端渲染 **/1>下载脚手架工具: github地址: https://github.com/nuxt/create-nuxt-app2>下载gitHub文件之后根据文档创建自己项目: 文档地址 https://zh.nuxtjs.org/guide/installation/3...原创 2020-03-13 16:34:27 · 2793 阅读 · 9 评论 -
H5完整版问卷模板
//如图,根据简要需求拟写一个简单的问卷模板1.顶部提示文案{根据需求跟换}2.百分比进度条跟随当前作答进度而改变3.当前题数/总题数4.根据索引显示上一题下一题/提交资料<html data-dpr="1" style="font-size: 37.52px;"> <head> <title>问卷调查</title> <meta charset="utf-8"> <.原创 2021-02-04 13:18:11 · 3597 阅读 · 11 评论 -
H5页面唤起app
前言介绍:近期有需求需要h5页面中唤起app功能小编试过N++方式,通过js直接以sheme形式跳转app,但是部分机型不兼容最终使用往上的一个插件js实现开发{具体需求是如果手机已存在app直接跳转app应用中,如果没有该app则跳转下载页面下载app}?H5版本实现跳转APP功能1==>引入js脚本 <script src="https://unpkg.com/callapp-lib@3.1.2/dist/index.umd.js"></script>2=.原创 2020-12-14 15:01:01 · 1597 阅读 · 1 评论 -
h5前端车辆信息三级选择首字母检索-----------------[原理其实都一样]
.city { display: block;}.city .city-wrapper { position: fixed; top: 0; bottom: 0; width: 100%;}.city .city-wrapper .cities .title { height: 28px; padding-left: 16px; ...原创 2018-05-25 10:15:03 · 2136 阅读 · 21 评论 -
前端h5页面传参跳转,中文乱码问题
关系 A界面------B界面-------A界面点击A界面中的触发事件(例如btn按钮),跳转到B页面选择数据, 点击B页面的按钮,携带B页面参数到A页面A页面:js代码//执行GetRequest() 函数,处理页面传参中文乱码问题$(function () {var postData = rque_str();var inpname = documen...原创 2018-04-26 16:16:27 · 3448 阅读 · 0 评论 -
vue.js实现购物车加减数量,计算金额数量,选中/未选中
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>老五购物车</title> <meta name="viewport" content="w原创 2018-08-20 10:41:10 · 19944 阅读 · 9 评论 -
h5/web遮罩弹窗
前提下载一个js文件引入哦!<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum原创 2018-08-20 11:32:35 · 9433 阅读 · 0 评论 -
vue.js实现h5机器人聊天测试版
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-sca原创 2018-08-24 11:03:16 · 2591 阅读 · 0 评论 -
html页面点击生成图片并可以下载图片
-----最近一位朋友的项目有个需求,是用户可以在项目中点击,让html页面生成图片,并且可以导出下载。我就做了一个简单的例子,有同样需求或者感兴趣的同行可以看看 //HtML<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name=原创 2018-09-03 09:57:51 · 13488 阅读 · 21 评论 -
前端js调用js
//Afunction show_A () { console.log("show_A");}//B //程序代码 new_element=document.createElement("script"); new_element.setAttribute("type","text/javascript"); new_element.setAttribute("src"...原创 2018-09-25 13:22:42 · 2237 阅读 · 0 评论 -
前端h5网页共用------AJAX结合VUE实现购物车
//html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,u原创 2018-09-25 14:40:46 · 784 阅读 · 0 评论 -
小程序中添加阴影
小程序中给标签或者button添加阴影 box-show//WXML<view class='cont'><view class='zrf'>我在这里</view></view>/*WXSS *//*视图 */.cont{position: relative;width:1...原创 2018-04-20 14:09:23 · 40629 阅读 · 0 评论 -
小程序video视频组件封面显示失效问题
/(这里注意,它会覆盖掉视屏,但是不会覆盖播放按钮,在video组件中给播放按钮添加一个单击事件bindplay="bindplay")//这里是一个video组件,但是因为video视屏组件的封面属性闪现失效问题,相信很多制作或者学习小程序的同行可能会遇到这个问题,话不多说,上解决办法。相信很多制作或者学习小程序的同行可能会遇到这个问题,话不多说,上解决办法。//我在video组件中写了一个cover-view。video概述:解决封面失效/适配问题。原创 2018-04-20 14:43:36 · 12173 阅读 · 19 评论 -
小程序车型品牌车系三级选择(地区也一样)
var cityObj = [ { "id": "1", "provincecode": "1", "images": "../images/Keepselling_tag@2x.png", "city": "全国", "code": "1", "initial": "*&q原创 2018-05-18 18:22:57 · 10464 阅读 · 13 评论 -
小程序左滑删除
<!-- 外层包裹视图 --><view class="cont"> <!-- 列表 --> <view wx:for="{{list}}" wx:key="index" class="list"> <!-- 滑动删除 --> <view bindtouchstart="touchS" bindtou...原创 2018-06-21 11:06:27 · 10415 阅读 · 8 评论 -
小程序折叠菜单【标题内容】
<!--WXML--><view style='padding-top:20rpx;'><view class='head_cont'><view class='head_write'></view><label class='head_title'>猜您想问</label>&原创 2018-07-03 10:26:28 · 2912 阅读 · 0 评论 -
小程序实现完整购物车[全选/反选计算金额/加减计算数量跟金额]
代码注释很容易理解 <!-- 最外层视图pages --><view class="pages"> <view wx:if="{{hasList}}"> <!-- 编辑 --> <view class='edit'> <label class='edit_btn' bindtap...原创 2018-07-20 13:59:13 · 22625 阅读 · 28 评论 -
小程序物流追踪状态页面
<!-- 外层pages --><view class='pages'> <!-- 头部 --> <view class='head'> <image class='head_img' src='../../image/list_img.png'></image> <label clas...原创 2018-08-01 17:39:00 · 17572 阅读 · 13 评论 -
小程序列表标题吸顶
<!--index.wxml--><!-- 最外层 --><view class="pages"> <!-- 轮播 --> <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000&q原创 2018-08-02 09:12:57 · 2119 阅读 · 0 评论 -
小程序搜索界面---【推荐搜索列表】
<view class="page"> <view class="page__bd"> <view class="weui-search-bar"> <view class="weui-search-bar__form"> <view class="原创 2018-08-07 15:19:39 · 5322 阅读 · 6 评论 -
介绍一款强大的框架-------一套代码生成两端应用【h5应用】--【小程序】
Touch WX 是什么?Touch WX是一套完全免费的微信小程序开发框架,包含丰富的UI控件用于官方组件的补充。与WeTouch和Touch UI开发模式保持了很大的一致性。与其他小程序框架最主要的区别在于:Touch WX完全是基于小程序官方的自定义组件机制实现,输出的是小程序原始代码,而不是输出开发者完全无法阅读的编译代码。这样当遇到问题时,开发者可以很方便的定位问题所在,还可以基于...原创 2018-08-07 15:46:48 · 3090 阅读 · 0 评论 -
小程序单选修改地址删除
//JS// pages/address/address.jsPage({ /** * 页面的初始数据 */ data: { // 列表数据 list: [{ name: "刘某某", id:1, base_id: "1355456456456456464", tell: "13548967894", ...原创 2018-08-31 16:02:21 · 2097 阅读 · 7 评论 -
小程序常用请求-----这里只举三种 get-post-options
//OPTIONS请求 wx.request({//请求方式 method: "options",//请求地址 url: uri,//header header: { 'authorization': "" },//参数 data: {...原创 2018-09-04 15:34:29 · 2867 阅读 · 0 评论 -
小程序数据拼接方式--------这里写两个例子
//JSON//JS 第一种方式 ------循环追加参数//循环遍历第一层数据 for (var g in that.data.list) {//循环遍历第一层数据中某个数组对象 for (var h in that.data.list[g].items) { var sku_code = that.d...原创 2018-09-14 09:12:34 · 11017 阅读 · 0 评论 -
小程序自定义模板实现小程序吸顶功能
//如图所示----这里用了自定义组件实现了小程序吸顶功能//WXML<view class="i-sticky-demo"> <i-sticky scrollTop="{{scrollTop}}"> <i-sticky-item i-class="i-sticky-demo-title"> &l原创 2018-09-20 15:53:08 · 2405 阅读 · 1 评论 -
分享一款--一套代码生成h5跟小程序
第一步-----安装node.js 1--https://npm.taobao.org/mirrors/node/v6.10.0/node-v6.10.0-x64.msi Windows64位下载 2--https://npm.taobao.org/mirrors/node/v6.10.0/node-v6.10.0-x86.msi Windows32位下载 3--http...原创 2018-09-21 17:23:25 · 7932 阅读 · 0 评论 -
小程序首字母检索---城市
--效果如图//WXML<view><!-- 首字母检索 --> <view class="searchLetter touchClass" > <!-- 右边字母数据数据 触摸事件--> <view wx:for="{{searchLetter}}" style="height:{{itemH}}px&原创 2018-09-26 10:26:54 · 2444 阅读 · 0 评论