因为uniapp自带框架兼容的问题,导致跟单独vue项目效果不一样,解决思路就是。for循环下面{{item.title}}这个属性值,不能包括任意元素。
错误代码如下:
例如这样写的话,dataset仍然为空
<template>
<view>
<view @tap="search">
<view class="home_item" v-for="(item,index) in list" :data-key="item" :index="index" :key="index" :data-index="index" :data-title="title">
<view>
{{item.title}}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
list:[
{id:11,title:'张三'},
{id:12,title:'李四'},
{id:13,title:'旺旺'},
{id:14,title:'丽丽'},
{id:15,title:'黑子'},
]
}
},
onLoad() {
},
methods: {
search(e){
console.log(e);
}
}
}
</script>
<style>
</style>
正确代码如下:
<template>
<view>
<view @tap="search">
<view class="home_item" v-for="(item,index) in list" :data-key="item" :index="index" :key="index" :data-index="index" :data-title="title">
{{item.title}}
<view>
{{item.title}}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
list:[
{id:11,title:'张三'},
{id:12,title:'李四'},
{id:13,title:'旺旺'},
{id:14,title:'丽丽'},
{id:15,title:'黑子'},
]
}
},
onLoad() {
},
methods: {
search(e){
console.log(e);
}
}
}
</script>
<style>
</style>
1、另有朋友可能会问了,不包裹文字的话,文字不就显示出来的吗。这个好办,文字颜色设置跟背景色一样就可以了。
2、我点击的是下面包裹的属性值,包裹成view的属性值,dataset还是空的,怎么办呢,解决思路如下:
for循环那个view设置position:relative,z-index:9文字设置超大,然后<view>张三</view>这里张三的view设置postion:absolute,然后设置z-index:1.只要层级在父级的下面就可以实现,点击效果。
这里主要是获取每一块区域的索引值。