xiaoyan2015
TA的个人档案
xiaoyan2015个人页面-阿里云开发者社区
文章
30
问答
1
个人介绍
一枚web前端开发骚年，拥有多年前端开发经验，无聊的时间看看书，写些技术案例分享~~~ Q：282310962 wx：xy190310
擅长的技术
- 前端开发
- 高分内容
- 最新动态
- 文章
- 问答
-
发表了文章 2020-10-09
Vue移动端弹窗组件|Nuxt模态框|Vue仿天猫底部弹出框
一个产品的诞生，必然是有它的应用场景存在！ 趁着国庆假期也给自己充充电，就使用NuxtJs开发了个实例项目，由于项目中多处需要用到对话框功能，本想着是使用Vant组件，经过再三考虑后，还是决定自己造一个轮子，于是就有了Nuxt自定义弹窗VPopup。 说明 VPopup 一个多功能移动端弹框组件。集合了 Vant 及 NutUI 中的 Msg信息框、Popup 弹出层、Notify 通知信息、Dialog 对话框、ActionSheet 动作面板框及 Toast 弱提示框 等功能。 快速使用 引入组件 import Popup from './components/popup' Vue.use(Popup) 标签式使用 <template> <view id="root"> ... <!-- VPopup 模板 --> <v-popup v-model="showDialog" anim="scaleIn" title="标题内容" content="弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内！" shadeClose="false" xclose :btns="[ {...}, {...}, ]" /> </view> </template> 函数式使用 <script> export default { ... methods: { handleShowDialog() { let $el = this.$vpopup({ title: '标题内容', content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内！', anim: 'scaleIn', shadeClose: false, xclose: true, onClose: () => { console.log('vpopup is closed ！') }, btns: [ {text: '关闭'}, { text: '确定', style: 'color:#00e0a1', click: () => { $el.close() } } ] }); } } } </script> 非常棒的一个Vue弹窗组件。可以说是你想要的效果，基本上是都可以组合搭配实现出来的。 参数配置 @@Props ------------------------------------------ v-model 当前组件是否显示 title 标题 content 内容（支持自定义插槽内容） type 弹窗类型（ toast | footer | actionsheet | actionsheetPicker | android/ios ） popupStyle 自定义弹窗样式 icon toast 图标（ loading | success | fail ） shade 是否显示遮罩层 shadeClose 是否点击遮罩时关闭弹窗 opacity 遮罩层透明度 round 是否显示圆角 xclose 是否显示关闭图标 xposition 关闭图标位置（ left | right | top | bottom ） xcolor 关闭图标颜色 anim 弹窗动画（ scaleIn | fadeIn | footer | fadeInUp | fadeInDown ） position 弹出位置（ top | right | bottom | left ） follow 长按 /右键弹窗（坐标点） time 弹窗自动关闭秒数（ 1 、2 、3 ） zIndex 弹窗层叠（默认 8080 ） btns 弹窗按钮（参数：text|style|disabled|click ） @@$emit ------------------------------------------ open 打开弹出层时触发（@open="xxx"） close 关闭弹出层时触发（@close="xxx"） @@Event ------------------------------------------ onOpen 打开弹窗回调 onClose 关闭弹窗回调 弹窗模板 <template> <div v-show="opened" class="nuxt__popup" :class="{'nuxt__popup-closed': closeCls}" :id="id"> <div v-if="JSON.parse(shade)" class="nuxt__overlay" @click="shadeClicked" :style="{opacity}"></div> <div class="nuxt__wrap"> <div class="nuxt__wrap-section"> <div class="nuxt__wrap-child" :class="['anim-'+anim, type&&'popui__'+type, round&&'round', position]" :style="popupStyle"> <div v-if="title" class="nuxt__wrap-tit" v-html="title"></div> <div v-if="type=='toast'&&icon" class="nuxt__toast-icon" :class="['nuxt__toast-'+icon]" v-html="toastIcon[icon]"></div> <template v-if="$slots.content"><div class="nuxt__wrap-cnt"><slot name="content" /></div></template> <template v-else><div v-if="content" class="nuxt__wrap-cnt" v-html="content"></div></template> <slot /> <div v-if="btns" class="nuxt__wrap-btns"> <span v-for="(btn,index) in btns" :key="index" class="btn" :style="btn.style" v-html="btn.text"></span> </div> <span v-if="xclose" class="nuxt__xclose" :class="xposition" :style="{'color': xcolor}" @click="close"></span> </div> </div> </div> </div> </template> /** * @Desc VueJs 自定义弹窗组件 VPopup * @Time andy by 2020-10-06 * @About Q：282310962 wx：xy190310 */ <script> let $index = 0, $lockCount = 0, $timer = {}; export default { props: { ... }, data() { return { opened: false, closeCls: '', toastIcon: { ... } } }, watch: { value(val) { const type = val ? 'open' : 'close'; this[type](); }, }, methods: { // 打开弹窗 open() { if(this.opened) return; this.opened = true; this.$emit('open'); typeof this.onOpen === 'function' && this.onOpen(); if(JSON.parse(this.shade)) { if(!$lockCount) { document.body.classList.add('nt-overflow-hidden'); } $lockCount++; } // 倒计时关闭 if(this.time) { $index++; if($timer[$index] !== null) clearTimeout($timer[$index]) $timer[$index] = setTimeout(() => { this.close(); }, parseInt(this.time) * 1000); } if(this.follow) { this.$nextTick(() => { let obj = this.$el.querySelector('.nuxt__wrap-child'); let oW, oH, winW, winH, pos; oW = obj.clientWidth; oH = obj.clientHeight; winW = window.innerWidth; winH = window.innerHeight; pos = this.getPos(this.follow[0], this.follow[1], oW, oH, winW, winH); obj.style.left = pos[0] + 'px'; obj.style.top = pos[1] + 'px'; }); } }, // 关闭弹窗 close() { if(!this.opened) return; this.closeCls = true; setTimeout(() => { this.opened = false; this.closeCls = false; if(JSON.parse(this.shade)) { $lockCount--; if(!$lockCount) { document.body.classList.remove('nt-overflow-hidden'); } } if(this.time) { $index--; } this.$emit('input', false); this.$emit('close'); typeof this.onClose === 'function' && this.onClose(); }, 200); }, shadeClicked() { if(JSON.parse(this.shadeClose)) { this.close(); } }, btnClicked(e, index) { let btn = this.btns[index]; if(!btn.disabled) { typeof btn.click === 'function' && btn.click(e) } }, getZIndex() { for(var $idx = parseInt(this.zIndex), $el = document.getElementsByTagName('*'), i = 0, len = $el.length; i < len; i++) $idx = Math.max($idx, $el[i].style.zIndex) return $idx; }, // 获取弹窗坐标点 getPos(x, y, ow, oh, winW, winH) { let l = (x + ow) > winW ? x - ow : x; let t = (y + oh) > winH ? y - oh : y; return [l, t]; } }, } </script> 另外弹窗还支持右键/长按弹窗，自定义slot插槽内容。 <!-- 长按弹窗 --> <v-popup v-model="showContextMenu2" type="contextmenu" :follow="followPos" opacity="0" :btns="[ {text: '标为未读', click: handleContextPopup}, {text: '消息免打扰'}, {text: '置顶聊天'}, {text: '删除', click: () => showContextMenu2=false}, ]" /> 根据项目需要，任意搭配参数，即可实现想要的效果。 ok，基于Nuxt|Vue开发自定义提示框组件就介绍到这里。希望对大家有所帮助！✍
-
发表了文章 2020-05-13
基于flutter仿微信聊天室|dart+flutter聊天实例
最近flutter跨平台应用技术比较火，作为前端开发有必要去学习了解下。这次给大家分享的是基于flutter+dart+chewie+photo_view+image_picker等技术开发仿微信app聊天项目。 技术点 编码/技术：Vscode + Flutter 1.12.13/Dart 2.7.0 视频组件：chewie: ^0.9.7 图片/拍照：image_picker: ^0.6.6+1 图片预览组件：photo_view: ^0.9.2 弹窗组件：SimpleDialog/AlertDialog/SnackBar（flutter封装自定义） 本地存储：shared_preferences: ^0.5.7+1 字体图标：阿里iconfont字体图标库 flutter入口页面main.dart /** * @tpl Flutter入口页面 | Q：282310962 */ import 'package:flutter/material.dart'; // 引入公共样式 import 'styles/common.dart'; // 引入底部Tabbar页面导航 import 'components/tabbar.dart'; // 引入地址路由 import 'router/routes.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter App', debugShowCheckedModeBanner: false, theme: ThemeData( primaryColor: GStyle.appbarColor, ), home: TabBarPage(), onGenerateRoute: onGenerateRoute, ); } } flutter图标Icon及自定义IconData组件 flutter中自带图标使用非常简单 Icon(Icons.search)可是如果想要自定义图标，如使用阿里图标iconfont如何实现，这时就需要用到IconData来实现自定义图标了。Icon(IconData(0xe60e, fontFamily:'iconfont'), size:24.0)使用IconData需要先下载阿里图标库字体文件，然后在pubspec.yaml中引入字体 class GStyle { // __ 自定义图标 static iconfont(int codePoint, {double size = 16.0, Color color}) { return Icon( IconData(codePoint, fontFamily: 'iconfont', matchTextDirection: true), size: size, color: color, ); } } flutter实现badge红点提示 在app中，类似如下红点提醒很常见，平时微信中就有见到，可以flutter没有提供这种组件，只能自定义实现了。 class GStyle { // 消息红点 static badge(int count, {Color color = Colors.red, bool isdot = false, double height = 18.0, double width = 18.0}) { final _num = count > 99 ? '···' : count; return Container( alignment: Alignment.center, height: !isdot ? height : height/2, width: !isdot ? width : width/2, decoration: BoxDecoration(color: color, borderRadius: BorderRadius.circular(100.0)), child: !isdot ? Text('$_num', style: TextStyle(color: Colors.white, fontSize: 12.0)) : null ); } } 调用非常简单：支持自定义红点大小、颜色，默认数字超过99就...显示；GStyle.badge(0, isdot:true)GStyle.badge(13)GStyle.badge(168, color: Colors.green, height: 17.0, width: 17.0) flutter聊天页面|编辑框表情处理 flutter中TextField文本框提供的maxLines属性可实现多行/换行文本，不过默认会有个高度，可在外层加个容器限制最小高度，然后设置 maxLines: null keyboardType: TextInputType.multiline Container( margin: GStyle.margin(10.0), decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(3.0)), constraints: BoxConstraints(minHeight: 30.0, maxHeight: 150.0), child: TextField( maxLines: null, keyboardType: TextInputType.multiline, decoration: InputDecoration( hintStyle: TextStyle(fontSize: 14.0), isDense: true, contentPadding: EdgeInsets.all(5.0), border: OutlineInputBorder(borderSide: BorderSide.none) ), controller: _textEditingController, focusNode: _focusNode, onChanged: (val) { setState(() { editorLastCursor = _textEditingController.selection.baseOffset; }); }, onTap: () {handleEditorTaped();}, ), ), flutter滚动聊天消息到最底部，通过ListView组件controller控制器实现 ScrollController _msgController = new ScrollController(); ... ListView( controller: _msgController, padding: EdgeInsets.all(10.0), children: renderMsgTpl(), ) // 滚动消息至聊天底部 void scrollMsgBottom() { timer = Timer(Duration(milliseconds: 100), () => _msgController.jumpTo(_msgController.position.maxScrollExtent)); } 好了，基于flutter聊天室项目今天就介绍到这里，希望大家能喜欢~~
-
发表了文章 2019-12-04
react+taro多端对话框|仿微信/taro-ui弹窗效果
taroPop自定义弹层组件|Modal框|dialog对话框|仿微信/ios/android对话框 实现了自定义多种弹窗类型(msg/toast/ios/android)/弹窗样式、支持多个按钮事件/按钮样式、自动关闭、遮罩层、弹窗位置及自定义slot模板 如下图：H5+小程序+ReactNative端效果 支持以下自定义参数配置： static defaultProps = { isVisible: false, //弹窗显示 title: '', //标题 content: '', //内容 contentStyle: null, //内容样式 style: null, //自定义弹窗样式 skin: '', //弹窗风格 icon: '', //弹窗图标 xclose: false, //自定义关闭按钮 shade: true, //遮罩层 shadeClose: true, //点击遮罩关闭 opacity: '', //遮罩透明度 time: 0, //自动关闭时间 end: null, //销毁弹窗回调函数 position: '', //弹窗位置显示 btns: null, //弹窗按钮 [{...args}, {...args}] } 组件用法：在页面引入自定义模态框组件import TaroPop from '@components/taroPop' import Taro from '@tarojs/taro' import { View, Text } from '@tarojs/components' // 引入弹窗组件 import TaroPop from '@components/taroPop' export default class TaroPopDemo extends Taro.Component { ... render() { return ( <View className="taro-container"> ... {/* 弹窗模板 */} <TaroPop ref="taroPop" /> </View> ); } } 通过如下方式调用组件内show及close方法this.refs.taroPop.show({...options})this.refs.taroPop.close() msg消息框效果 this.refs.taroPop.show({ content: 'Taro消息提示框（3s后窗口关闭）', shade: true, shadeClose: true, time: 3, anim: 'fadeIn', }) ios弹窗效果 let taroPop = this.refs.taroPop taroPop.show({ skin: 'ios', title: '消息提示', content: 'ios弹窗效果 （弹窗内容，用于告知当前状态、提示信息和解决方法，描述文字/文案尽量控制在三行内）', shadeClose: false, btns: [ { text: '取消', style: {color: '#6190e8'}, onClick() { taroPop.close() } }, { text: '不再提醒', style: {color: '#6190e8'}, onClick() { console.log('您点击了前往设置！') } } ] }) 调用方式和上面一样，不过是不同的参数配置不同而已。 /** * @Title Taro自定义弹窗组件 - taroPop.jsx * @Time andy by 2019-11-28 */ import Taro from '@tarojs/taro' import { View, Text, Image } from '@tarojs/components' import { Modal, ActivityIndicator, TouchableHighlight } from 'react-native' import classNames from 'classnames' import './index.scss' export default class TaroPop extends Taro.Component { /** * @ 弹窗默认配置 */ static defaultProps = { isVisible: false, //弹窗显示 title: '', //标题 content: '', //内容 contentStyle: null, //内容样式 style: null, //自定义弹窗样式 skin: '', //弹窗风格 icon: '', //弹窗图标 xclose: false, //自定义关闭按钮 shade: true, //遮罩层 shadeClose: true, //点击遮罩关闭 opacity: '', //遮罩透明度 time: 0, //自动关闭时间 end: null, //销毁弹窗回调函数 anim: 'scaleIn', //弹窗动画 position: '', //弹窗位置显示 btns: null, //弹窗按钮 [{...args}, {...args}] } constructor(props) { super(props) this.state = { ...this.props, } this.timer = null } /** * @ 显示弹窗事件 */ show = (options) => { this.setState({ ...this.props, ...options, isVisible: true }) } /** * @ 关闭弹窗事件 */ close = () => { this.setState({...this.props}) this.timer && clearTimeout(this.timer) delete this.timer typeof this.state.end === 'function' && this.state.end.call(this) } ... render() { let { isVisible, title, content, contentStyle, style, skin, icon, xclose, shade, shadeClose, opacity, time, end, anim, position, btns } = this.state let taroEnv = process.env.TARO_ENV ... // 渲染H5、RN模板 const renderTpl = ( <View className="taroPop"> {/* 遮罩 */} {shade ? <View className="atpop__ui_mask" style={{opacity: opacity == '' ? .6 : opacity}} onClick={this.shadeClick} /> : null} {/* 窗体 */} <View className="atpop__ui_main"> <View className={classNames('atpop__ui_child', skin && 'atpop__' + skin, position && 'atpop__ui_child-' + position)} style={style}> {/* 标题 */} {title ? <Text className={classNames('atpop__ui_tit', skin && 'atpop__ui_tit-' + skin)}>{title}</Text> : null} {/* 内容 */} {content ? <View className="atpop__ui_cnt"> {/* toast内容 */} {icon && skin === 'toast' ? <View className="atpop__ui_toast"> {icon === 'loading' && taroEnv === 'rn' ? <ActivityIndicator color="rgba(255,255,255,.5)" size={24} /> : <Image className={classNames('atpop__ui_toast-img', icon=='loading' && 'atpop__ui_toast-img-loading')} src={toastIcon[icon]} mode="aspectFit" /> } </View> : null } {/* 文本内容 */} <Text className={classNames('atpop__ui_cntxt', skin && 'atpop__ui_cntxt-' + skin)} style={contentStyle}>{content}</Text> </View> : this.props.children } {/* 按钮 */} {btns ? <View className={classNames('atpop__ui_btns', skin && 'atpop__ui_btns-' + skin)}> {btns.map((item, i) => { return taroEnv === 'rn' ? <TouchableHighlight className={classNames('atpop__ui_btn', skin && 'atpop__ui_btn-' + skin)} activeOpacity={1} underlayColor='rgba(200,200,200,.3)' key={i} onPress={item.onClick}> <Text className={classNames('atpop__ui_btntxt', skin && 'atpop__ui_btntxt-' + skin)} style={item.style}>{item.text}</Text> </TouchableHighlight> : <View className={classNames('atpop__ui_btn', skin && 'atpop__ui_btn-' + skin)} key={i} onClick={item.onClick}> <Text className={classNames('atpop__ui_btntxt', skin && 'atpop__ui_btntxt-' + skin)} style={item.style}>{item.text}</Text> </View> })} </View> : null } </View> {/* xclose */} {xclose ? <View className="atpop__ui_xclose" onClick={this.close}><Image className="atpop__ui_xclose-img" src={require('./skin/error.png')} mode="aspectFit" /></View> : null} </View> </View> ) // 渲染窗体 if (taroEnv === 'rn') { return ( <Modal transparent={true} visible={isVisible} onRequestClose={this.close}> {renderTpl} </Modal> ) }else if (taroEnv === 'h5' || taroEnv === 'weapp'){ return isVisible && renderTpl } } } 另外编译到RN需要特别注意样式问题，flex布局及最好使用BEM命名规则。 let taroEnv = process.env.TARO_ENV // 渲染窗体 if (taroEnv === 'rn') { return ( <Modal transparent={true} visible={isVisible} onRequestClose={this.close}> {renderTpl} </Modal> ) }else if (taroEnv === 'h5' || taroEnv === 'weapp'){ return isVisible && renderTpl } 像上面，taro还提供了对于不同端环境变量判断，另外RN端使用到了Modal组件包裹。到这里就基本介绍完了，后续会继续放送一些分享实例。
-
发表了文章 2019-11-13
基于vue+uniapp直播室实例|仿陌陌/抖音效果
Uni直播是一个运用uni-app+nvue+vuex等技术实现的类似抖音/陌陌功能的直播聊天室项目，功能效果类似陌陌直播上下滑动切换，有聊天/礼物/评论等功能。 预览效果 如上图：可编译到多端，在小程序/H5端/App端效果基本一致 技术栈 编辑器+技术：HBuilderX2.3.9 + vue/NVue/uniapp/vuex iconfont 图标：阿里字体图标库 自定义导航栏 + 底部 Tabbar 弹窗组件：uniPop （ uni-app 封装自定义 Modal 弹窗） 测试环境：H5 端 /微信小程序 /App 端 /真机 项目中的聊天部分，可参看这篇：uniapp 聊天室 App|vue+uniapp 仿微信聊天界面|仿微信朋友圈 uniapp实现抖音效果 uni-app+nvue 技术实现仿抖音界面滑动效果，且有点赞、评论及商品等功能，可以单击、双击判断。 <swiper :indicator-dots="false" :duration="200" :vertical="true" :current="videoIndex" @change="handleSlider" style="height: 100%;"> <block v-for="(item,index) in vlist" :key="index"> <swiper-item> <view class="uni_vdplayer"> <video :id="'myVideo' + index" :ref="'myVideo' + index" class="player-video" :src="item.src" :controls="false" :loop="true" :show-center-play-btn="false" objectFit="fill"> </video> <!-- 中间播放按钮 --> <view class="vd-cover flexbox" @click="handleClicked(index)"><text v-if="!isPlay" class="iconfont icon-bofang"></text></view> <!-- 底部信息 --> <view class="vd-footToolbar flexbox flex_alignb"> <view class="vd-info flex1"> <view class="item at"> <view class="kw" v-for="(kwItem,kwIndex) in item.keyword" :key="kwIndex"><text class="bold fs_18 mr_5">＃</text> {{kwItem}}</view> </view> <view class="item subtext">{{item.subtitle}}</view> <view class="item uinfo flexbox flex_alignc"> <image class="avator" :src="item.avator" mode="aspectFill" /><text class="name">{{item.author}}</text> <text class="btn-attention bg_linear1" :class="item.attention ? 'on' : ''" @tap="handleAttention(index)">{{item.attention ? '已关注' : '关注'}}</text> </view> <view class="item reply" @tap="handleVideoComment"><text class="iconfont icon-pinglun mr_5"></text> 写评论...</view> </view> <view class="vd-sidebar"> <view v-if="item.cart" class="ls cart flexbox bg_linear3" @tap="handleVideoCart(index)"><text class="iconfont icon-cart"></text></view> <view class="ls" @tap="handleIsLike(index)"><text class="iconfont icon-like" :class="item.islike ? 'like' : ''"></text><text class="num">{{ item.likeNum+(item.islike ? 1: 0) }}</text></view> <view class="ls" @tap="handleVideoComment"><text class="iconfont icon-liuyan"></text><text class="num">{{item.replyNum}}</text></view> <view class="ls"><text class="iconfont icon-share"></text><text class="num">{{item.shareNum}}</text></view> </view> </view> </view> </swiper-item> </block> </swiper> /** * @desc 小视频JSON数据 * @about Q:282310962 */ module.exports = [ ... { avator: '/static/uimg/u__chat_img5.jpg', poster: '/static/placeholder/video-img2.jpg', src: 'https://txmov2.a.yximgs.com/bs2/newWatermark/MTY3NTU3MzYzMTQ_zh_4.mp4', author: '往后余生都是你', subtitle: '能不能给我一首歌的时间，让你拾起从前的快乐', keyword: '', playNum: 7268, likeNum: 3438, replyNum: 1105, shareNum: 327, islike: false, attention: false, cart: [ { name: 'YCID施蒂蓝玫瑰凝养柔滑唇膏', image: 'https://cbu01.alicdn.com/img/ibank/2019/218/182/12384281812_1493014487.jpg', price: 7.70 }, { name: '玛可安迪新款抖音网红推荐口红', image: 'https://cbu01.alicdn.com/img/ibank/2019/285/249/10457942582_1068990292.jpg', price: 19.9 }, ] }, ... ] <script> const videoJson = require('./mock-video.js') // 引入商品广告、评论 import videoCart from '@/components/cp-video/cart.vue' import videoComment from '@/components/cp-video/comment' let timer = null export default { data() { return { videoIndex: 0, vlist: videoJson, isPlay: true, //当前视频是否播放中 clickNum: 0, //记录点击次数 } }, components: { videoCart, videoComment }, onLoad(option) { this.videoIndex = parseInt(option.index) }, onReady() { this.init() }, methods: { init() { this.videoContextList = [] for(var i = 0; i < this.vlist.length; i++) { // this.videoContextList.push(this.$refs['myVideo' + i][0]) this.videoContextList.push(uni.createVideoContext('myVideo' + i, this)); } setTimeout(() => { this.play(this.videoIndex) }, 200) }, // 滑动切换 handleSlider(e) { let curIndex = e.detail.current if(this.videoIndex >= 0){ this.videoContextList[this.videoIndex].pause() this.videoContextList[this.videoIndex].seek(0) this.isPlay = false } if(curIndex === this.videoIndex + 1) { this.videoContextList[this.videoIndex + 1].play() this.isPlay = true }else if(curIndex === this.videoIndex - 1) { this.videoContextList[this.videoIndex - 1].play() this.isPlay = true } this.videoIndex = curIndex }, // 播放 play(index) { this.videoContextList[index].play() this.isPlay = true }, // 暂停 pause(index) { this.videoContextList[index].pause() this.isPlay = false }, // 点击视频事件 handleClicked(index) { if(timer){ clearTimeout(timer) } this.clickNum++ timer = setTimeout(() => { if(this.clickNum >= 2){ console.log('双击视频') }else{ console.log('单击视频') if(this.isPlay){ this.pause(index) }else{ this.play(index) } } this.clickNum = 0 }, 300) }, // 喜欢 handleIsLike(index){ let vlist = this.vlist vlist[index].islike =! vlist[index].islike this.vlist = vlist }, // 显示评论 handleVideoComment() { this.$refs.videoComment.show() }, // 显示购物车 handleVideoCart(index) { this.$refs.videoCart.show(index) }, } } </script> 到这里就介绍差不多了，后续会继续分享项目实例，希望有一些帮助吧。
-
发表了文章 2019-10-10
uniapp仿微信聊天室|仿微信界面
项目介绍 基于uniapp+vue仿微信聊天室uniapp-chatroom项目，实现了发送图文消息、表情(gif动图)，图片预览、地图位置、红包、仿微信朋友圈等功能。 效果预览 如下图：H5/小程序/App端测试效果 技术栈 编辑器：HBuilder X 技术框架：uni-app + vue +vuex 弹窗组件：uniPop（基于uni-app封装模态弹窗） 测试环境：H5端 + 小程序 + App端（三端均兼容） 引入公共组件及样式main.js import Vue from 'vue' import App from './App' // >>>引入css import './assets/fonts/iconfont.css' import './assets/css/reset.css' import './assets/css/layout.css' // >>>引入状态管理 import store from './store' Vue.prototype.$store = store // >>>引入公共组件 import headerBar from './components/header/header.vue' import tabBar from './components/tabbar/tabbar.vue' import popupWindow from './components/popupWindow.vue' Vue.component('header-bar', headerBar) Vue.component('tab-bar', tabBar) Vue.component('popup-window', popupWindow) // >>>引入uniPop弹窗组件 import uniPop from './components/uniPop/uniPop.vue' Vue.component('uni-pop', uniPop) Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App }) app.$mount() uniapp+vuex状态管理实现登录验证 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { user: uni.getStorageSync('user'), token: uni.getStorageSync('token'), }, mutations: { // 存储token SET_TOKEN(state, data) { state.token = data uni.setStorageSync('token', data) }, // 存储用户名 SET_USER(state, data) { state.user = data uni.setStorageSync('user', data) }, ... }, }) <script> import { mapState, mapMutations } from 'vuex' import util from '../../utils/util.js' export default { data() { return { formObj: {}, } }, computed: { ...mapState(['user', 'token']) }, mounted() { // 判断是否有登录 if(this.user){ uni.redirectTo({url: '/pages/index/index'}) } }, methods: { // 提交表单 handleSubmit(e) { ... } } } </script> 好了，今天的分享就到这里，后续会继续分享一些项目实例，希望大家能喜欢~~
滑动查看更多
滑动查看更多
-
发表了文章
2020-10-09
Vue移动端弹窗组件|Nuxt模态框|Vue仿天猫底部弹出框
-
发表了文章
2020-05-13
基于flutter仿微信聊天室|dart+flutter聊天实例
-
发表了文章
2019-12-04
react+taro多端对话框|仿微信/taro-ui弹窗效果
-
发表了文章
2019-11-13
基于vue+uniapp直播室实例|仿陌陌/抖音效果
-
发表了文章
2019-10-10
uniapp仿微信聊天室|仿微信界面
-
发表了文章
2019-09-28
uni-app自定义Modal弹窗|alert对话框|Toast提示
-
发表了文章
2019-09-17
uni-app导航栏自定义配置|仿App原生导航条
-
发表了文章
2019-09-01
RN仿微信app聊天|react native群聊|红包|朋友圈实例
-
发表了文章
2019-08-03
react-native自定义Modal、Dialog弹窗|RN原生android/ios弹窗
-
发表了文章
2019-07-16
angular+h5聊天室|聊天实战angular版
-
发表了文章
2019-06-29
react+网页端聊天项目|仿微信web版
-
发表了文章
2019-06-23
react+redux聊天IM系统|react仿微信界面
-
发表了文章
2019-05-01
vue网页端web聊天IM实例|仿微信客户端vue版
-
发表了文章
2019-04-05
vue仿微信界面聊天室项目|vue聊天案例
-
发表了文章
2018-12-24
h5语音聊天|仿微信语音效果|摇一摇|支付键盘
-
发表了文章
2018-12-12
小程序自定义数字键盘|仿微信支付、支付宝支付密码键盘
-
发表了文章
2018-12-02
支付宝小程序自定义弹窗插件wcPop|模态弹窗model|弱提示Toast
-
发表了文章
2018-11-18
微信小程序自定义弹窗组件showModel|toast信息框
-
发表了文章
2018-11-04
html5直播实例|h5仿陌陌、仿火山小视频
-
发表了文章
2018-10-21
h5仿同程、携程、去哪儿酒店预订webapp项目实例
滑动查看更多
