How to implement uniapp pop-up box

With the popularity of mobile Internet, more and more people are beginning to use smartphones and tablets for online activities. Along with this, the demand for mobile app and web design is also increasing. UniApp is a cross-platform development framework that solves this problem. It provides a cross-platform development solution that can achieve a set of codes and the effect of running on multiple terminals, including but not limited to iOS, Android, H5 and other platforms.

This article mainly discusses the pop-up box in the UniApp framework.

In the UniApp framework, the pop-up box is one of the commonly used components. It can help us prompt the user in the form of a pop-up window on the client, such as confirming operations, obtaining user login and other information, etc. Therefore, how to implement the UniApp pop-up box is one of the skills we must master.

1. The use of UniApp pop-up boxes

The UniApp framework provides two different types of pop-up boxes to help us meet different needs. Let’s take a look at one of the basic usages:

• Use alert() to display simple text information

In the UniApp framework, you can use the alert() method to display simple text The information is displayed to the user in the form of a pop-up window:

uni.alert({
  title: '提示信息',
  content: '这是一条简单的弹出提示',
  success: function () {
     console.log('弹出框已关闭')
  }
});

Among them, title is the title of the pop-up box, content is the main content of the pop-up box, and success is the callback function after the pop-up box is closed. Of course, cancellation can also be achieved through cancel. The function of the button callback function.

• Use confirm() to obtain user selection

In the UniApp framework, we can also use the confirm() method to pop up the selection prompt box, for example:

uni.confirm({
  title: '选择操作',
  content: '你确定要进行某个操作吗？',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确认操作');
    } else if (res.cancel) {
      console.log('用户取消操作');
    }
  }
});

In the above code, the confirm() method will pop up a selection prompt box to prompt the user to make a selection. After the user completes the selection, we will obtain the user's selection through the callback function and respond to the selection result. operation. Among them, res.confirm indicates that the user confirms the operation, and res.cancel indicates that the user cancels the operation.

2. Implement a customized UniApp pop-up box

In addition to using the built-in methods provided by the framework, we can also customize the pop-up box to achieve a more flexible effect. Now, let's take a look at how to implement a custom UniApp pop-up box.

1. HTML Layout

First, we need to prepare the HTML layout of a pop-up box, for example:

<template>
  <view class="modal">
    <view class="modal-content">
      <view class="modal-header">
        <h2>弹出框标题</h2>
        <i class="fa fa-times" @click="closeModal"></i>
      </view>
      <view class="modal-body">
        <p>这里是弹出框的主体内容</p>
      </view>
      <view class="modal-footer">
        <button type="button" @click="submit">确定</button>
        <button type="button" @click="closeModal">取消</button>
      </view>
    </view>
  </view>
</template>

In the above layout, we use View components achieve different style effects through different class attributes. At the same time, we also use Vue instructions such as @click to bind click events.

2. CSS Style

Next, we need to further process the pop-up box style to make it more beautiful and reasonable, for example:

.modal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal .modal-content {
  width: 400rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
  overflow: hidden;
}

.modal .modal-content .modal-header {
  background-color: #337ab7;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx;
}

.modal .modal-content .modal-header h2 {
  margin: 0;
}

.modal .modal-content .modal-header i {
  font-size: 20rpx;
  cursor: pointer;
}

.modal .modal-content .modal-body {
  padding: 20rpx;
}

.modal .modal-content .modal-footer {
  background-color: #eeeeee;
  padding: 10rpx;
  display: flex;
  justify-content: flex-end;
}

.modal .modal-content .modal-footer button {
  border: none;
  padding: 10rpx 20rpx;
  margin-left: 10rpx;
  border-radius: 5rpx;
  cursor: pointer;
}

.modal .modal-content .modal-footer button:first-child {
  background-color: #337ab7;
  color: #ffffff;
}

.modal .modal-content .modal-footer button:last-child {
  background-color: #dddddd;
  color: #333333;
}

In the above CSS styles, we used some CSS techniques to achieve the style effect of multiple groups of buttons through pseudo-class identifiers such as :after and :before. At the same time, we also used rules such as @keyframes to define animations. Effect.

3. JS code

Finally, we need to write JS code to implement the specific functions of the pop-up box, for example:

export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    closeModal() {
      this.visible = false;
    },
    submit() {
      console.log('执行提交操作');
      this.closeModal();
    }
  }
}

In the above code, We use the data() method to define a data attribute named visible, which is used to store the display and closing status of the pop-up box. At the same time, we also defined three methods: showModal(), closeModal() and submit(), which are used to control the display and closing of the pop-up box and the click behavior of the confirmation button respectively.

4. Page usage

After completing the above steps, we can use our customized pop-up box in a specific page, for example:

<template>
  <view>
    <button type="button" @click="showModal">打开弹出框</button>
    <modal :visible.sync="visible"></modal>
  </view>
</template>

<script>
import Modal from '@/components/modal.vue';

export default {
  components: {
    Modal
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    showModal() {
      this.visible = true;
    }
  }
}
</script>

In the above code, we used the Vue component writing method and introduced the Modal component we defined through the import syntax. Then, in the data() method, we also defined a data attribute named visible. In the template, we call the showModal method through the @click binding event of the button tag to display the pop-up box.

3. Summary

At this point, we have completed the complete process of customizing the UniApp pop-up box. Generally speaking, the pop-up box component provided by UniApp has built-in methods such as alert() and confirm(), which can meet basic needs; if you need a more complex pop-up box, you can use HTML layout, CSS style, JS code, etc. In this aspect, the effect of customizing the pop-up box can be achieved. I hope this article can be helpful to everyone's UniApp development work.

The above is the detailed content of How to implement uniapp pop-up box. For more information, please follow other related articles on the PHP Chinese website!