Shulou(Shulou.com)06/01 Report--

Editor to share with you what to do about the problems encountered by vue using mui, I believe most people do not know much about it, so share this article for your reference. I hope you will gain a lot after reading this article. Let's go to know it together.

Records of pits encountered using mui

Mainly use webpack packaging tools and mui,mint ui, in which mui has a lot of holes, recorded here

First, a bottom tab is made with the tab component of mui, as follows

Yes, the style is OK, but when you find the switch option later, you will get an error Unable to preventDefault inside passive event listener due to target being treated as passive, as follows

But this error will not affect the operation, but I have obsessive-compulsive disorder, access to data found that the touch event can not listen to the preventDefault problem, that is, the problem caused by triggering the touch event, you can simply add a style touch-action:none to the wildcard selector and find a successful solution.

Then a horizontal scrolling navigation bar is needed according to the demand, which looks something like this.

Regional scrolling is required. Mui amicably provides us with this component. Of course, the current example of horizontal scrolling does not seem to be on the official website. We need to download the official document. This case can be found in the github URL https://github.com/dcloudio/mui.

The path can be seen in the figure, and you can double-click to open it.

No more nonsense, and then the official request to load the js file, ok directly introduced, and then I packaged with webpack and found that I reported a mistake

Uncaught TypeError: 'caller','callee',and' arguments' properties may not be accessed on strict mode

So looking up the data, we found that webpack uses the strict mode of js by default, but some of mui is not strict mode, so you need to modify it, install the Babel package and go to the .babelrc file to add code.

Transform-remove-strict-mode

The problem is solved, and then you need to specify the initialization scrolling position. According to the official document, you need to use the scrollTo function, ok, to copy directly. Here comes the problem.

Uncaught TypeError: (0, _ muiMin2.default) (…) . (...) .scrollTo is not a function

After searching for information for a long time, I found that it should be used in the mounted hook function, because before this, the reorganization has not been fully rendered, and it is not possible to put it in created (I am used to doing business in created most of the time).

But here comes the problem again, the head is about to explode. After setting the initial scrolling position, I found that it was blank after sliding. Later, it was found that the parameter of scrollTo required a numeric type, while I gave it a string type, which could be converted with parseInt.

As I had more and more content, a scroll bar appeared, and I found that I could not scroll up and down on the phone, only the navigation bar component before scrolling, and I found that the touch-action set before can set a variety of properties, so I found that the property pan-y was used to enable the single finger vertical translation gesture. After setting it, I found that it was possible to scroll up and down without the error of the previous Unable.

Yes, here comes the problem again. I clicked on the tab at the bottom and found that it could not be switched. When I looked up the data, I found that this was due to the conflict of class name mui-tab-item.

Mui's js conflicts. There are two ways to solve it. 1

Copy the style of mui-tab-item, and then change the class name, you can change mui-tab-item-s and so on. It is not easy to get confused.

Method 2

Add the following code to the main component (usually the app component)

Mounted () {mui ('body') .on (' tap', 'asides, function () {_ document.location.href = this.href;});}

Note that it must be used in the mounted hook function.

There is also a small problem, the scrolling event of vue. If the parent container sets overflow:hidden, the onscroll binding event will be invalid. If you do not want to change the parent container overflow property, you can use the

AddEventListener ('scroll',function () {}, true)

Note that the true parameter indicates the capture mode (for more information, please see event bubbling).

So far, the problems found so far have been solved.

The above is all the contents of the article "what to do with the problems encountered by vue using mui". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.