• Movable-area penetration problems
Problem description: Movable-area uses position as pixed, and when the mask is on a low level page, the bottom page cannot respond to touch and click events. Step1: First add pointer- Events to movable-area CSS: None; Step2: Then add pointer- Events: Auto to the MOVable-view CSS;Copy the code
  • ShowActionSheet Pop-up menu problem
Wx. showActionSheet, there is a cancel button on iOS, but there is no cancel button on Android, you need to forcibly select the action menu. Solution: 1, determine the system is Android, itemList add a "cancel" operation menu; 2, the developer custom a similar popover operation menu component;Copy the code
  • The upper and lower page partitions are faulty
Problem description: There are menu filter items at the top of the page, and the rest part is a list. I want to fix the menu bar so that the menu bar does not scroll with the page. Step1: WXML code <view class="container"> <! <view class="nav"></view> <! -- listView --> <scroll view class="list"></scroll view> </view> Step2: CSS code. height: 100%; display: flex; flex-direction: column; } .nav { width: 100%; height: 100rpx; } .list { width: 100%; flex: 1; }Copy the code
  • WXSS unified variable problem
Problem description: small programs are basically the corresponding WXSS of each page page independently prepared layout style, how to achieve unified style management? Use variable controls. Solution: step1: add page style to app.wxss file and add variable with "--[variable name]" format, as shown in the code below; page { width: 100%; height: 100%; --background-color: #f5f5f5; --font-size: 32rpx; } Step2: Call the variable on the corresponding WXSS file of the page to be used, in the format of "var(--[variable name])", and call the method as shown in the code below; container { width: 100%; height: 100%; background-color: var(--background-color); font-size: var(--font-size); }Copy the code

Continuous updates…