博客

1.vue中的阻止事件冒泡

@click.stop = “clickFn”

2.uniapp中利用uview写u-popup弹出层，在弹出层中通过点击事件改变样式的字体颜色，背景颜色，当关闭时，字体颜色和背景颜色不能保存

设置一个index变量，当打开弹出框的时候，马上执行函数，不过其中有赋值操作，需要删除。

因为第二份变量的初始化是没有值的所以当打开的时候会报错误

Error in v-on handler: "TypeError: Cannot read property 'classList' of undefined"

found in

需要用到&&操作符

//打开弹出框，保存其状态
			openFn() {
//第一个
				var $box = document.querySelectorAll('.box');
				$box.forEach((item, index) => {
					item.classList.remove('color-box')
				})
				$box[this.index1].classList.add('color-box');
//第二个
				var $boxbc = document.querySelectorAll('.box-bc');
				$boxbc.forEach((item, index) => {
					item.classList.remove('back-box')
				});
//小细节规避报错
				$boxbc[this.index2]&&$boxbc[this.index2].classList.add('back-box');
			},

3.uniapp返回上一级页面

retunBackFn(){
       uni.navigateBack();     
}

4.css设置根据视口滚动来改变头部div的样式

第一步：给页面增加滚动监听事件

mounted() {
		    window.addEventListener("scroll", this.showIcon);
		},

第二步：通过监听的高度判断，来给增加样式

showIcon() {
   //获取页面滚动到某个高度触发事件
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				var $box = document.querySelector('.top-sticky');
				if(scrollTop>100){
					$box.classList.add('backgound-box')
				}else{
					$box.classList.remove('backgound-box');
				}
			}

5. 在用v-for循环渲染数据的时候，需要斑马纹

用:class=”index%2 == 0 ? ‘class1’:’class2′”

注意了： index是从0开始的，还是呆呆的怀疑是不是取余问题

6. 复制文本

利用自定义属性，将需要复制的文本写入，通过点击事件完成。

copePhone(e){
				uni.setClipboardData({
					data: e.currentTarget.dataset.set,
				});
			}

7.组件picker的使用

<picker @click="rotateFn" @change="bindPickerChange" :value="index" :range="array">
				<view class="left">
					{{array[index]}}

					<u-icon :class="rotate?'returnrotate':''" name="arrow-down"></u-icon>

				</view>

			</picker>

array: ['全部', 'ry123456789', 'ry1234567', 'ry123456'], //picker组件的选择选项数组
				index: 0, //picker组件的选择下表

//picker组件选择触发事件
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},

8.uview组件的利用

 @click="show1 =true"

	<u-action-sheet @click="click" :list="list1" v-model="show1"></u-action-sheet>

list1: [{
					text: '已结算',
					disabled: true,
				}, {
					text: '撤销',
					disabled: false,
				}],

//点击右上角的状态，跳出操作菜单框
			click(index) {
				console.log(index);
				console.log(`点击了第${index + 1}项，内容为：${this.list1[index].text}`);
				this.list1.forEach(item => {
					item.disabled = false
				});
				this.list1[index].disabled = true;
				this.value = this.list1[index].text;
			}

9.uniapp  API的使用

长按出现弹框，可以分享照片给微信朋友和保存照片到相册

<view @longpress="previewImage">打开预览{{show}}</view>
<u-action-sheet @click="clickFn" :list="list" v-model="show"></u-action-sheet>

data() {
			return {
				show: true,
				images: [
					'https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/baike/w%3D268/sign=0e209ef0ba014a90813e41bb91763971/0bd162d9f2d3572c01e8bd9e8913632762d0c36d.jpg'
				], //预览的图片列表
				list: [{
					text: '保存图片到相册',
				}, {
					text: '分享图片'
				}],
			}
		},

previewImage() {
				this.show = true;
			},



			clickFn(index) {
				if (index == 0) {
					uni.saveImageToPhotosAlbum({
						filePath: '../../static/download.png',
						success: function() {
							console.log('save success');
						}
					});AA
				} else {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 2,
						imageUrl: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png",
						success: function(res) {
							// console.log("success:" + JSON.stringify(res));
							uni.showToast({
								title:'分享成功'
							})
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
							uni.showToast({
								title:'分享失败'
							})
						}
					});
				}

			}

在模拟器上报错显示

[system] API `share` is not yet implemented

10. scroll-view 自定义下拉刷新事件

<scroll-view class="scroll-view" scroll-y="true" style="height: 100%;width: 100%;"
refresher-enabled="true" :refresher-triggered="triggered" @refresherpulling="onPulling"
@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">

<script>
    export default {
        data() {
            return {
                triggered: false
            }
        },
        onLoad() {
            this._freshing = false;
            setTimeout(() => {
                this.triggered = true;
            }, 1000)
        },
        methods: {
            onPulling(e) {
                console.log("onpulling", e);
            },
            onRefresh() {
                if (this._freshing) return;
                this._freshing = true;
                setTimeout(() => {
                    this.triggered = false;
                    this._freshing = false;
                }, 3000)
            },
            onRestore() {
                this.triggered = 'restore'; // 需要重置
                console.log("onRestore");
            },
            onAbort() {
                console.log("onAbort");
            }
        }
    }
</script>