Solution in Weex

Android

How does Android pass events to Weex?

                    HashMap<String,Object> hashMap = new HashMap();
                    hashMap.put("seatNum",tableNo);
                    fireEvent("onSelectedSeat", hashMap);
Copy the code

Weex page

Pull up load, pull down refresh

<template> <list class="list" offset-accuracy="100" show-scrollbar="false" loadmoreoffset="10" @loadmore="loadmore"> <refresh v-if="pageRefresh" class="refresh"> <hdl-indicator ref="hdlIndicator" @onrefresh="onrefresh" /> </refresh> <cell v-for="(num,index) in lists" :key="index" class="cell"> <div class="panel"> <text class="text">{{ num }}</text> </div> </cell> </list> </template> <script> const modal = weex.requireModule('modal') export default { data () { return { pageRefresh: true, lists: ['A', 'B', 'C', 'D', 'E'] } }, methods: { loadmore () { modal.toast({ message: 'Trigger loadmore event'}) this.lists = this.lists. Concat (this.lists)}, onRefresh (event) {modal.toast({message: }) setTimeout(e => {this.pageRefresh = false}, 2000)}}} </script> <style scoped>. Panel {width: 600px; height: 300px; margin-left: 75px; margin-top: 35px; margin-bottom: 35px; flex-direction: column; justify-content: center; border-width: 2px; border-style: solid; border-color: rgb(162, 217, 192); Background: rgba(162, 217, 192, 0.2); } .text { font-size: 88px; text-align: center; color: #41B883; } </style>Copy the code

Note:

In the public page, there is a problem with the drop-down refresh, it is ok to remove the drop-down refresh.

How does a WEEx page send an event to Android

Weex end send events following this. $refs. Map. SetSelectedAnnotationWithStoreInfo ({latitude: res. HdlStoreLatitude/latitude/longitude: Res.hdlstorelongitude, // longitude: data. Address, name: Data. StoreName / / store name}) Android receiving @ JSMethod public void setSelectedAnnotationWithStoreInfo (JSONObject JSONObject) {} The interpretation of the website https://weex.apache.org/zh/guide/extend/extend-android.html#component-%E6%89%A9%E5%B1%95Copy the code

List pull-up loading effect

Note: In order to achieve the pull-up loading effect, you need to configure two places

1. Loadmore event

Loadmoreoffset: if your loadmore event is not triggered, it is possible that the loadMoreoffset value is not set. Set it to a value >0.

<template> <list class="list" offset-accuracy="100" show-scrollbar="false" loadmoreoffset="10" @loadmore="loadmore"> <cell v-for="num in lists" class="cell"> <div class="panel"> <text class="text">{{ num }}</text> </div> </cell> </list> </template> <script> const modal = weex.requireModule('modal') export default { data () { return { lists: ['A', 'B', 'C', 'D', 'E'] } }, methods: { loadmore () { modal.toast({ message: 'Trigger loadmore event'}) this.lists = this.lists. Concat (this.lists)}} </script> <style scoped>. Panel {width: 600px; height: 300px; margin-left: 75px; margin-top: 35px; margin-bottom: 35px; flex-direction: column; justify-content: center; border-width: 2px; border-style: solid; border-color: rgb(162, 217, 192); Background: rgba(162, 217, 192, 0.2); } .text { font-size: 88px; text-align: center; color: #41B883; } </style>Copy the code

WeexBug: List styles behave differently on Android and IOS

The phenomenon of

The parent container of the list is full screen, and the list is set to the following style, which would theoretically be full screen, but the last item of data is not fully displayed.

The solution

1. Add an empty cell at the end of the list. Set the height of the empty cell to 100px, so that it can be displayed completely on both Android and IOS.

2. Since the outer layer of the list contains a div, remove the div and solve the problem.

How to get the height of the Weex page

This approach had some problems in our project

The height of the page obtained by IOS is the height of the screen – the height of the navigation bar – the height of the title bar

We cover the page with a div and then set the height of div, which is the height of IOS. It can be obtained through the following experiment:

<div class="test" />
.test {
  position: fixed;
  left: 0px;
  top: 0px;
  right:0px;
  bottom: 0px;
  height: 1202px;
  background-color: sandybrown;
}
Copy the code

rendering

Then we get the page height on the Andoir phone and set it to Test to see what the page looks like

Why does this happen?

In our project, we did not use the system title bar, but a custom title bar. Therefore, when calculating the page height using the above method, the height of the title bar should also be added.

Solutions:

On IOS phones, use the above method to get the height of the page.

But on an Android phone, we use the above method to get the height of the page, and then subtract the height of the title bar.

Generate two-dimensional code in Weex

In order to achieve the generation of two-dimensional code, we must use native to achieve, Android side must use Zxing to achieve, must be achieved through Module.

Needs and Phenomena:

There are Silder component and indicator component on the page. When we want to make long screenshots, we need to hide indicator component. We use v-IF and V-show to control the display or hiding of indicator, but it doesn’t work.

Solutions:

We then control the display or hiding of the indicator by changing the style, and display the indicator by changing the item-size value to 0 or 16px.

Expand your ideas:

You can set the width of the indicator to show or hide it. (This method is not tested)

component

text

1, how to wrap text?

Set the width of the text, and you’re done.