Android
Android はどうやって Weex にイベントを渡すのですか？
HashMap<String,Object> hashMap = new HashMap();
hashMap.put("seatNum",tableNo);
fireEvent("onSelectedSeat", hashMap);
Weex
プルアップで読み込み、プルダウンで更新
<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: 'ロードモアイベントをトリガーする
})
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-color: rgba(162, 217, 192, 0.2);
}
.text {
font-size: 88px;
text-align: center;
color: #41B883;
}
</style>
注目してください：
公開ページでは、ドロップダウンの更新に少し問題があります。ドロップダウンの更新を削除すれば問題ありません。
weex ページが Android にイベントを送信する方法
weexendは以下のようにイベントを送信する。
this.$refs.map.setSelectedAnnotationWithStoreInfo({
latitude: res.hdlStoreLatitude, //
longitude: res.hdlStoreLongitude, //
address: data.address,
name: data.storeName //ショップ名
})
Android
@JSMethod
public void setSelectedAnnotationWithStoreInfo(JSONObject jsonObject) {
}
公式サイトの説明
https://..org/zh/guide/extend/extend-.html#component-%E6%89%A9%E5%B1%95
listテキストの幅を設定するには？
注：プルアップ・ローディングの効果を得るには、以下の2箇所を設定する必要があります。
1.ロードモアイベント
2、loadmoreoffset：公式サイトによると、loadmoreイベントがトリガーされなかった場合、loadmoreoffsetの値が設定されていない可能性が非常に高いです。
<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: 'ロードモアイベントをトリガーする
})
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-color: rgba(162, 217, 192, 0.2);
}
.text {
font-size: 88px;
text-align: center;
color: #41B883;
}
</style>
WeexBug: Android と IOS でスタイルを設定した後のリストの挙動が異なります。
不敬
リストの親コンテナはフルスクリーンで、次に以下のようなスタイルでリストが設定され、理論的にはdipはフルスクリーンになりますが、実際には最後のデータはすべて表示されませんでした。
問題解決方法
1、空セルの末尾のリストで、空セルの高さを100pxに設定し、AndroidやIOSで完全に表示できるようにしました。
2、divに包まれた外側の層のリストに起因する、divが削除され、問題が解決されます。
Weex ページでページの高さを取得する方法 質問
プロジェクトの中で、この方法にはいくつかの問題があります。
IOSは上記の方法で、画面の高さ-ナビゲーションバーの高さ-タイトルバーの高さとしてページの高さを取得します。
ページにdivをスタンプし、そのdivの高さを設定することで、この高さがIOSを取得する高さとなり、以下の実験から導き出すことができます：
<div class="test" />
.test {
position: fixed;
left: 0px;
top: 0px;
right:0px;
bottom: 0px;
height: 1202px;
background-color: sandybrown;
}
レンダリング
次に、アンドワールフォンでページの高さを取得し、テストに設定します。
なぜこのようなことが起こるのでしょうか？
プロジェクトはシステムタイトルバーではなく、カスタムタイトルバーを使用しているため、上記の方法でページの高さを計算すると、タイトルバーの高さも追加されます。
解決策
IOS携帯電話では、上記の方法でページの高さを取得してください。
しかし、Android携帯の場合は、上記の方法でページの高さを取得し、タイトルバーの高さを差し引きます。
indicatorコンポーネントの表示と非表示
QRコードの生成を実現するには、ネイティブを使用する必要があり、Android側は、Zxingの助けを借りて実装する必要があり、モジュールを介して実装する必要があります。
インジケータコンポーネントの表示と非表示
ニーズと現象：
ページには、Silderコンポーネントとインジケータコンポーネントがあり、長いスクリーンショット機能を実行したいときは、インジケータコンポーネントを非表示にする必要があり、使用する方法は、v-ifとv-showを介してインジケータを表示または非表示に制御することですが、有効になりませんでした。
解決策
その後、スタイルを変更することでインジケータの表示/非表示を制御し、item-sizeの値を0または16pxに変更することでインジケータを表示することができます。
アイデアを広げること：
インジケータの 幅を 設定することで、インジケータの表示/非表示を切り替えることができます。
text
テキスト
1、テキストを改行するには？
テキストの幅を設定して完了です。
