得意小门生的博客

效果图：首先在page页面设置enablePullDownRefresh属性 激活下拉{ "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app", "enablePullDownRefresh":true }}export default { data() { return { orders: [], //列表 page: 1,//当前

效果说明：点击当前项显示操作列表，点击其他项先隐藏其他操作在显示当前的操作。点击最外层隐藏所有操作。<template> <view class="wrap" @click="hideIsShow"> <view class="list"> <view class="item flex justify-between" v-for="(item, index) in list" :key="index"> <view class=

效果图：<view class="tuik flex justify-between"> <view class="left">退款金额</view> <view class="main flex justify-between align-items-center"> <view class="inputs flex" @click="getInputFocus"> <input class="input"

点击后：<view class="item"> <view class="tit">选择时间</view> <picker class="picker date" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"> <view>{{ date }}</view> </picker> &lt.

效果图<view class="evaluate flex align-items-center"> 课程评价 <template v-for="(val, index) in 5"> <image @click="setStar(index + 1)" class="img" :src="star > index ? '../../../static/image/star.png' : '../../../static/image/no-s

效果图：说明：点击删除按钮可以删除图片，点击图片可以预览图片。<view class="img-box flex flex-wrap"> <view class="img" v-for="(item, index) in imgList"> <image class="pic" :src="item" mode="aspectFill" @click="lookImg(index)"></image> <image @click="del

uni-app官网：https://uniapp.dcloud.io/api/media/image?id=previewimage微信小程序官网：https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.htmluniapp 实现图片预览 单图预览和多图预览关键点就是调用uni.previewImage({ current: index, urls: photoList});如果是单图

点击前：点击后：<view class="item"> <view class="title">选择学员</view> <view class="line flex justify-between" style="width: 100%;"> <view class="desc"> {{checkStudents[studentIndex].name}} </view> <picker mode="s

<view class="item flex align-items-center"> <view class="title">新手机号</view> <view class="newPhone"><input type="text" value="" v-model="newPhone" /></view> <view v-if="showText == true" class="sendCodeBtn" @click..

说明：uni-app中的radio只能修改颜色和大小，但是往往跟设计图有所差别。下面我们就用其他方式自定义radio单选框的效果。效果图：<view class="item flex justify-between align-items-center" v-for="(item, index) in sexs" :key="index" @click="setSex(index)"> <text>{{ item.value }}</text> <imag

<view class="item flex justify-between align-items-center"> <view class="left">头像</view> <view class="right" @click="setHead"> <image :src="head" mode="aspectFill" class="head"></image> <image src="../../../sta.

@input事件 ，当键盘输入时，触发input事件，event.detail = {value}<input class="uni-input" @input="onKeyInput()" />场景@input事件想要传递一个参数到方法中 但是同时还要保留原来返回的event解决方法：$event@input="onKeyInput($event,123)"运用效果图：<view class="item" v-for="(item,index) in Pic.

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。 如下：<template> <view class="container"> <uni-list> <uni-list-item title="第一行"><.

起初小程序上线时，微信限制了代码包不能超过1MB，后来功能变大变成了2M了，限制大小是出于对小程序启动速度的考虑，希望用户在使用任何一款小程序时，都能获得一种“秒开”体验。但是，2MB也限制了小程序功能的扩展，小程序业务的发展可能需要更大的体积。为了解决这个问题，微信推出了—分包加载。小程序分包加载对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。目录结构：开发者通过在 app.json subpackages字段声明项目分包结构：{ "pag.

传参页面<view class="comment" @click="comment(detail.goods_id)"><!-- 拿到要传过去的参数 --></view>methods: { comment:function(id){ uni.navigateTo({ //多个参数用&拼接:url: '../comment/comment?id='+id'&name='+name

一、onLoad只加载一次，监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）二、onShow监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面。主要区别：从二级页面返回该页面时，onLoad不会再次加载，而onshow会重新加载。这点很重要1.如果加载列表页，二级页面对一级的列表页面内容有修改，则以及列表函数应该在onShow中加载，否则可以选择onLoad。2.如果从一个页面携带参数跳转到另外一个页面，在另一个页面获取参数的方式： o

官网：https://uniapp.dcloud.io/component/swiper效果图：<view class="swiper"> <swiper :interval="3000" :duration="1000" :indicator-dots="false" :current="topSwiperIndex" @change="topSwiperTab"> <swiper-item v-for="(item,index) in