Various problems in the development of uni app

Special attention:

* for components under components, use / static / img for image path/ back.png In this form of root path, do not use the form of.. / static or.. /.. / static. Otherwise, it is very difficult. Some platforms do not report errors or display errors, and some cannot find paths.

 

tips: to prevent the page from scrolling when the pop-up window is masked, add the view label on the outer layer of the pop-up window@ touchmove.stop.prevent= "

 

1. About the adaptation of the screen in the custom navigation bar:

The official CSS variable can be directly referenced:

var(--status-bar-height)

This variable automatically matches the height of the device platform status bar

This variable can be used with calc() plus other unit values

Specific parameters and Description: Notes for official use of custom navigation bar

 

2. When the height of swiper is not adaptive, the dynamic acquisition node is used to assign to the outer swiper component

uni.createSelectorQuery() followed by. in(this) can prevent app side error

 

<swiper :indicator-dots="true" :style="{height:listHeight+'px'}" :autoplay="false" :interval="3000" :duration="1000"></swiper>
  var _self;
    export default {
        data() {
            return {
                listHeight:215
            }
        },
        onLoad() {
            _self=this;
            _self.getEleHeight('.swiper-item');
        },
        onShow() {
            
        },
        methods: {
            getEleHeight(list){
                let info = uni.createSelectorQuery().in(_self).select(list);
              info.boundingClientRect(function(data) { //data - Various parameters
                  if(data != null){
                        _self.listHeight = data.height;
                    }else{
                        setTimeout(function(){
                            _self.getEleHeight('.swiper-item');
                        },300)
                    }
              }).exec()
            }
            
        }
    }

3. Horizontal scroll view adapts to the width of sub elements

The key is to set the following css for the direct next level view of scroll view:

  width:auto;

  display: inline-block;

  white-space: nowrap;

<scroll-view scroll-x="true" class="scroll_box">
                    <view class="list">
                        <view class="item" v-for="(item,index) of 4" :key="index">
                           
                        </view>
                    </view>
                </scroll-view>

 

.scroll_box{
    width: 100%;
    height: auto;
}

.list{
    width: auto;
    height: 100upx;
    display: inline-block;
    white-space: nowrap;
}

.item{
    width:320upx;
    display: inline-block;
    height: 100%;
}

 

4. Some components are fixed at the top when they slide upward and exceed the screen. Do they absorb the top

Set the position value of css positioning element to sticky for this component. You can adjust the position by combining the top and left values.

 

5. On tabbar

It is recommended to use the configured tabbar, and the customized view has no caching mechanism.

The native tabbar actually has many functions. After reading the following knowledge points, most of the requirements can be realized:

tabbar document API method: https://uniapp.dcloud.io/api/ui/tabbar

Details of tabbar official website: https://uniapp.dcloud.io/collocation/pages?id=tabbar

 

6. Save picture to local

At least Android is useful for real machine test. For more information, please check: uni image saving local (app and wechat applet)

                uni.showModal({
                    title: 'Tips',
                    content: 'Are you sure you want to save to the album',
                    success: function (res) {
                        if (res.confirm) {
                            
                            uni.downloadFile({
                                    url: _self.ewmImg,//Picture address
                                    success: (res) =>{
                                        if (res.statusCode === 200){
                                            uni.saveImageToPhotosAlbum({
                                                filePath: res.tempFilePath,
                                                success: function() {
                                                    uni.showToast({
                                                        title: "Saved successfully",
                                                        icon: "none"
                                                    });
                                                },
                                                fail: function() {
                                                    uni.showToast({
                                                        title: "Save failed",
                                                        icon: "none"
                                                    });
                                                }
                                            });
                                        } 
                                    }
                                })
                            
                            
                        } else if (res.cancel) {
                            
                        }
                    }
                });

 

7. Some common function reference addresses are as follows

Please refer to the following links for login and image bulk upload

Uni app front and back end actual combat course - Yuedu: http://www.hcoder.net/tutorials/info_1371.html

Tags: Android

Posted on Fri, 22 May 2020 03:21:36 -0400 by j3rmain3