ナレッジポイント
- apiはアプレットで利用可能です, wx.previewImage(object,object)
- 新しいページでイメージをフルスクリーンでプレビューします。プレビュー中、ユーザーはイメージを保存したり、友人に送信したりすることができます。
- サンプルコード
wx.previewImage({
current: '', // 表示されたイメージの現在のhttpリンク
urls: [] // プレビューが必要なイメージのhttpリンクのリスト。
})
プロジェクトの問題
この API は一次元配列で使用すると便利です。
この API を 2D 配列で使用します。
- js
data: {
newsList:[
{
id:'1',
imgs:[
'https://api-hmugo-..net/pyg/.png',
'https://api-hmugo-..net/pyg/.png',
'https://api-hmugo-..net/pyg/.png'
]
},
{
id:'2',
imgs:[
'https://api-hmugo-..net/pyg/.png',
'https://api-hmugo-..net/pyg/.png',
'https://api-hmugo-..net/pyg/.png'
]
},
{
id:'3',
imgs:[
'https://api-hmugo-..net/pyg/.png',
'https://api-hmugo-..net/pyg/.png',
'https://api-hmugo-..net/pyg/.png'
]
}
]
},
/*
イメージをクリックすると拡大する
* @param index 現在のイメージの添え字
* @param item 現在クリックされているオブジェクトのすべてのイメージリンク
*/
// 12123
previewImg:function(e){
let index = e.currentTarget.dataset.index;
let item = e.currentTarget.dataset.item;
wx.previewImage({
current: item[index],
urls: item,
})
}
クリックイベントがトリガーされると、現在のデータ内のすべてのイメージリンクをdata-itemを通してjsに渡して処理します。cuurentは現在のリンクアドレスを格納し、urlsはすべてのリンクの配列を格納します。
- wxml
<view class="event-row" wx:for="{{newsList}}" wx:key="{{id}}">
<view class="event-item">
<view class="title-row">
<view class="title">{{item.title}}</view>
<text class="title-content" >
{{item.content}}
</text>
<view class="img">
<image class="" wx:for="{{item.imgs}}" wx:for-item="item02" src="{{item02}}" data-item="{{item.imgs}}" data-index="{{index}}" bindtap="previewImg"
></image>
</view>
</view>
</view>
</view>
イメージリンクが繰り返される場合、彼はページネーションがページ番号の最初の出現を表示します、それは、このapiのバグのはずです。
写真の通り：
同じリンクで、最初の1/5まであります。
