showActionSheet
uni.showActionSheet({
itemList: ['A', 'B', 'C'],
success: function (res) {
console.log(res);
},
fail: function (res) {
console.log(res.errMsg);
}
});
成功的回调中显示的是选项的索引
如果要拿到具体的内容而不是索引，就要在data中定义一个列表，然后将定义的变量放到这个方法中
this关键字指向当前函数所在的对象，如果要用的变量不在这个对象中，例如嵌套的层数多了，用了this也拿不到，要解决这个问题，在当前对象中，定义一个let that = this即可解决问题，现在es6可以使用箭头函数就解决这个问题
然后用了that之后，调的时候就是用that调，而不是this了
<template>
<view class="content">
<view class="box" @click="clickBox">
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
arr:["三国演义","水浒传","红楼梦"]
}
},
onLoad() {
},
methods: {
clickImg(){
uni.showToast({
title: "发布失败",
icon:'error',
mask: true
}),
setTimeout(()=>{
uni.navigateTo({
url:"/pages/demo/demo"
})
},1500)
},
clickBox (){
// 这里因为嵌套问题,在this指向的对象里没有arr这个值,要拿到这个值有两个办法
// 一是在当前函数所处对象外部外层定义let that = this
// 二是使用箭头函数
// let that = this;
// uni.showActionSheet({
// itemList: this.arr,
// success: function (res) {
// console.log(that.arr[res.tapIndex]);
// }
// });
// 方法二:使用箭头函数
uni.showActionSheet({
itemList: this.arr,
success: res=>{
console.log(this.arr[res.tapIndex]);
}
});
}
}
}
</script>
<style>
.box {
width: 200rpx;
height: 200rpx;
background: pink;
}
</style>
现在点击了页面中的盒子，选择某一项之后，可以拿到值而不是索引了
这个弹出框可以写一个title，但是样式和下面的选项是一样的，不好看，不如不要
