Web前端
关注
分享
扫一扫
html、css、js、vue、uniapp
深漂小码哥
芝兰生于深林，不以无人而不芳；君子修道立德，不为穷困而改节！
展开
-
uniapp 单页背景色铺满全屏
【代码】uniapp 单页背景色铺满全屏。原创 2024-09-07 10:05:14 · 474 阅读 · 1 评论 -
uniapp免费视频教程
Uni-App从入门到实战-黑马程序员https://www.bilibili.com/video/BV1BJ411W7pX?p=49前端-uni app实战项目【黑马程序员】（配源码+笔记）https://www.bilibili.com/video/BV1Rj411f7iY原创 2021-02-28 09:39:44 · 3266 阅读 · 0 评论 -
uniapp动态样式
订单状态 == 值 ？'样式1':'样式2'<view :class=" 4 == 12 ? 'order-question': 'order-status'"> 交易成功 </view>原创 2021-03-02 16:13:08 · 836 阅读 · 0 评论 -
uniapp 小程序 不在以下 request 合法域名列表中
原创 2021-03-29 09:35:45 · 1394 阅读 · 0 评论 -
uniapp [sitemap 索引情况提示] 根据 sitemap 的规则[0]，当前页面 将被索引
修改unpackage/dist/dev/mp-weixin/project.config.json"checkSiteMap": false,原创 2021-04-27 16:49:06 · 1953 阅读 · 0 评论 -
uniapp 小程序 文件体积超过 500KB common/vendor.js
HBuilderX创建的项目1.勾选运行-->运行到小程序模拟器2.勾选运行->运行时是否压缩代码cli创建的项目在pacakge.json中添加参数--minimize，示例："dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"...原创 2021-04-02 12:02:34 · 7642 阅读 · 8 评论 -
建议在 swiper-item 子节点上设置样式。
原因：swiper-item不能加行内样式可在下一级加view加行内样式原创 2021-04-27 16:57:25 · 2282 阅读 · 0 评论 -
uParse uniapp数据不能为空
Uparse插件导致的noData: { type: String, default: '<div style="color: red;">数据不能为空</div>' },改为 noData: { type: String, default: '' },原创 2021-04-02 11:39:56 · 1225 阅读 · 0 评论 -
uniapp 输入框placeholder字体颜色和大小
添加placeholder-style属性，如下<input class="uni-input" placeholder="输入单号查看物流信息" placeholder-style="font-size:26rpx;color:#ACACAC;" type="text">原创 2021-01-26 14:45:56 · 12504 阅读 · 1 评论 -
uniapp计算属性
计算属性：可以理解为是对data中的数据提供了一种加工或过滤的能力<template> <view> <view v-for="item in filterList" :key="item.id" > {{item.name}} </view> <!-- <view v-for="item in porcessList" :key="item.id" > {{item.name}} --&g原创 2021-02-28 10:24:38 · 4461 阅读 · 2 评论 -
uniapp返回上一页携带参数,两种方法，实测有效
方法一：pages/pre/pre.vue<template> <view> <view>返回的数据为:</view> <view>id: {{testdata.id}}</view> <view>name: {{testdata.name}}</view> <button type="primary" @click="goNext">跳转到下一页面</button&原创 2021-03-09 14:09:15 · 18972 阅读 · 3 评论 -
uniapp跳转到新页面并传参
pages/index/index<template> <view class="content"> <navigator url="/pages/test/test?id=1&name=test" hover-class="navigator-hover"> <button type="default">跳转到新页面并传参</button> </navigator> <button type=原创 2021-02-26 07:44:15 · 2399 阅读 · 0 评论 -
uniapp上拉加载
1.pages.json中开启触底距离"onReachBottomDistance":{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app", "enablePullDownRefresh": true, ..原创 2021-02-25 06:49:43 · 2200 阅读 · 0 评论 -
uniapp发起网络请求
uni.request({ url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。 data: { text: 'uni.request' }, header: { 'custom-header': 'hello' //自定义请求头信息 }, success: (res) => { console.log(res.data); th.原创 2021-02-25 06:56:14 · 475 阅读 · 0 评论 -
uniapp页面通讯
uni.$emit(eventName,OBJECT)触发全局的自定事件uni.$on(eventName,callback)监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。<template> <view> <button type="primary" @click="addNum">这是A组件</button> </view></template>原创 2021-02-27 11:55:34 · 317 阅读 · 0 评论 -
uniapp复制功能
copyCode(value) { uni.setClipboardData({ data: value, success: () => { uni.showToast({ title: "复制成功" }) } }); },原创 2021-03-08 14:24:55 · 2192 阅读 · 0 评论 -
uniapp 设置favicon
1. 将favicon.ico放入static/images下2.根目录下创建index.html<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="icon" href="st原创 2021-02-20 09:34:56 · 1809 阅读 · 0 评论 -
uniapp 顶部tabs固定
<view class="sticky-top"> <u-tabs @change="changePackStatus" height="84" font-size="28" name="cate_name" bar-width="60" bar-height="4" active-color="#EB9309" count="cate_count" :list="list" :is-scroll="false" :current="current"></u...原创 2021-03-08 16:48:55 · 4221 阅读 · 2 评论 -
uniapp enable ide service (y/n) [27d [27c
在hbuilderx里运行编译uni-app的微信小程序版，报：enable ide service (y/n) [27d [27c解决方法：在微信开发者工具里点击设置》安全设置，开启服务端口原创 2021-01-25 16:53:53 · 13494 阅读 · 1 评论 -
uniapp 跳转到商品详情页
<template> <view class="goods-list"> <goods-list :goods="goods" @goodsItemClick="goGoodsDetail"></goods-list> <view>我是有底线的</view> </view></template><script> import goodsList from '../../compon.原创 2021-02-28 09:37:08 · 4163 阅读 · 1 评论 -
uniapp跨端兼容
<template> <view class="content"> <!-- #ifdef H5 --> <view>只在H5中显示</view> <!-- #endif --> <!-- #ifdef MP-WEIXIN --> <view>只在微信小程序中显示</view> <!-- #endif --> </view></templa.原创 2021-02-26 07:18:54 · 394 阅读 · 0 评论 -
uniapp数据存储、获取和删除
<template> <view class="content"> <button type="primary" @click="setStorage">存储数据</button> <button type="primary" @click="getStorage">获取数据</button> <button type="primary" @click="delStorage">删除数据</button.原创 2021-02-25 21:52:30 · 5333 阅读 · 0 评论 -
uniapp组件创建及生命周期
组件创建, components/test.vue<template> <view> 这是test组件 </view></template><script> export default { data() { return { } }, beforeCreate() { console.log('实例已经开始初始化了') }, created() { console.log原创 2021-02-27 10:37:29 · 501 阅读 · 0 评论 -
uview时间区间选择
html <view>搜索日期：</view> <view> {{defaultStartTime}}<image @click="selStart" class="ssel-icon" src="/static/images/ssel.png"></image> <u-picker mode="time" :defaultTime="defaultStartTime" v原创 2021-04-27 14:29:42 · 9250 阅读 · 1 评论 -
uniapp,uview发送验证码效果
<template> <view> <view :class="status == 1? 'before-style': 'after-style'" @tap="getVerifyCode" >{{tips}}</view> <u-toast ref="uToast"></u-toast> <u-verification-code start-text="发送验证码" change-text="Xs" :seco.原创 2021-03-10 13:35:21 · 4062 阅读 · 0 评论 -
uniapp 封装请求
1.根目录下创建utils/api.jsconst BASE_URL = 'http://localhost:8082'export const myRequest = (options)=>{ return newPromise((resolve, reject)=>{ uni.request({ url: BASE_URL+options.url, method: options.method || 'GET', data: optionds.data ||原创 2021-02-27 17:06:11 · 347 阅读 · 0 评论 -
VM27 WAService.js:2 TypeError: Cannot read property ‘forceUpdate‘ of undefined
解决方法如下图：原创 2021-01-25 17:05:53 · 40140 阅读 · 5 评论 -
uniapp 横向滚动
<scroll-view scroll-x="true" class="scroll"> <view class="scroll-box"> 11 </view> <view class="scroll-box"> 22 </view> <view class="scroll-box"> 33 </view>.原创 2021-02-04 10:33:34 · 393 阅读 · 0 评论 -
uniapp事件传参
<template> <view> <button data-index="11" type="primary" @click="clickBtn(1, $event)">点击事件1</button> <button data-index="22" type="primary" @click="clickBtn(2, $event)">点击事件2</button> </view></template&g.原创 2021-02-28 10:42:00 · 1040 阅读 · 1 评论 -
uniapp条件编译
通过v-if来决定显示和隐藏，不适合做频繁的切换显示通过v-show来决定显示和隐藏，适合做频繁的切换和显示<view v-if="true">显示</view><view v-if="false">隐藏</view><view v-if="isShow">显示或隐藏</view><view v-show="true">显示</view><view v-show="false">隐藏原创 2021-02-28 10:04:40 · 415 阅读 · 0 评论 -
uniapp下拉刷新
1.pages.json中开启"enablePullDownRefresh": true{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app", "enablePullDownRefresh": true原创 2021-02-25 06:39:38 · 414 阅读 · 0 评论 -
uniapp实现动态增删元素
<template> <view> <view class="item-box" v-for="(item, index) in list"> <input type="text" placeholder="请输入"> <button type="warning" @click="delItem(item)">删除</button> </view> <button type="primary.原创 2021-03-10 10:45:35 · 12747 阅读 · 3 评论 -
uniapp父组件与子组件之间的传值
父组件传子组件：父组件定义值，子组件通过props获取，然后渲染子组件传父组件：子组件中用$emit方法，父组件用获取子组件：<template> <view> <button type="primary" @click="sendNum">{{title}}这是test组件,</button> </view></template><script> export default {原创 2021-02-27 11:24:58 · 1151 阅读 · 0 评论 -
Cannot read property ‘$mp‘ of undefined；at “pages/index/index“
解决办法如下图：原创 2021-01-25 16:59:18 · 2082 阅读 · 0 评论 -
uniapp 列表上拉加载，下拉刷新
<template> <view class="goods-list"> <goods-list :goods="goods"></goods-list> <view>我是有底线的</view> </view></template><script> import goodsList from '../../components/goods-list/goods-list.vue'.原创 2021-02-28 08:09:37 · 878 阅读 · 0 评论 -
uniapp Now you can provide attr `wx:key` for a `wx:for` to improve performance.
解决办法：加key属性<view class="shenbao-cont" v-for="(item, index) in listitem" :key="index"></view>原创 2021-03-11 16:46:30 · 936 阅读 · 0 评论 -
uniapp一个中文空格
　原创 2021-03-05 10:37:44 · 2987 阅读 · 1 评论 -
uniapp上传图片和预览图片
<template> <view class="content"> <button type="primary" @click="uploadImg">上传图片</button> <!-- 点击图片预览 --> <img v-for="item in imgArr" :src="item" @click="previewImg(item)" alt=""> </view></template>.原创 2021-02-25 22:19:32 · 375 阅读 · 0 评论 -
uniapp点击切换样式，动态加载样式
HTML <view class="zz-sel-box"> <view @click="changeMoney(0)" :class="{selStyle:money == 0}" class="zz-sel-item"> 其他面额 </view> <view @click="changeMoney(300)" :class="{selStyle:money == 300}" class="zz-sel-item">原创 2021-02-25 18:37:36 · 2962 阅读 · 0 评论 -
uniapp 富文本避坑指南
注意事项，后端API返回的一定要是HTML形式的, 富文本编辑器存入数据的内容，则需要转化，如果是php，则用下面的函数进行转化htmlspecialchars_decode()1.导入到项目中2.修改页面<template> <div> <u-parse :content="article" @preview="preview" @navigate="navigate" /> </div></template.原创 2021-04-02 10:23:53 · 1107 阅读 · 0 评论