當前位置：首頁 » APP程序 » 微信小程序list列表

微信小程序list列表

發布時間: 2021-03-18 01:58:25

Ⅰ 微信小程序中，用什麼可以在WXML展開一個數組列表

做一個查詢的功能可以根據id查到或者根據text查到id
附上數組如下
resultset: [{id:1,text:"aaa"},{id:2,text:"bbb"}, {id: 3,text: 'ccc'}, {id: 4,text: 'f'}]

之前嘗試了一些方法就像在傳統語言那樣遍歷數組然後尋找相等的值但是發現好像並不是特別好使

var resultSet =this.data.resultset
const length = resultSet.length var val = this.data.inputValue if(val){
console.log(val) for(let i =0;i<=length;i++){ //console.log(resultSet[i])
if(val == resultSet[i].id){
console.lo("找到了") var result = this.data.resultSet[i].id
console.log("結果是"+result)
} else{
console.log("沒找到結果")
}

}

} else{
console.log("沒輸入啊")
}
}

Ⅱ 微信小程序循環列表怎麼寫，提供思路即可

單個循環
<view wx:for="{{pinpaiTishi}}" wx:key="{{xxx}}">
<view wx:if="{{item.name!=null}}" wx:key="{{xxxx}}">
//判斷name是否為null
<view class="tr">
<view class="td-left"></view>
<view class="td-right">
<view bindtap="onclickByPinpai" data-name="{{item.name}}" class="tishi">{{item.name}}</view>
綁定的方法專參數屬值
</view>
</view>
</view>
</view>

Ⅲ 微信小程序怎麼調用list contains方法

js怎麼調用的小程序就怎麼調用唄

Ⅳ 微信小程序關鍵詞列表功能如何使用方法

微信小程序關鍵詞列表功能怎麼用呢?相信有很多用戶可能還不太清楚微信小程序關鍵詞列表功能如何使用，那麼統一小編就為你們分享微信內測小程序搜索軟體介紹，一起來看看吧。
微信內測小程序搜索軟體介紹

日前微信悄然開始內測小程序關鍵詞搜索列表功能，微信選中的測試用戶在搜索框搜索小程序時，就會出現五個最相關的關鍵詞小程序，經測試該排名應該與用戶使用熱度相關，用戶在使用熱門小程序時不必再搜索全名進入。

例如在搜索框當中輸入“J”，則下方會出現最相關的五個小程序，用戶直接點擊就能夠直接載入，不需要再進入搜索結果頁面。

從測試來看目前微信已經大規模開放了該功能的測試，如果你沒有出現上方的搜索結果建議重新登錄或者升級你的微信版本再試。

與之前只能通過搜索全名進入小程序相比，微信小程序新增加的該功能明顯讓小程序多了一個進入的入口，剩下的可能只差一個微信官方的小程序商店了。

Ⅳ 微信小程序怎麼實現內容的展開和收起

看到一個需求，對一些前端小白或者剛開始寫小程序的人來說，可能會有點幫助，效果如下：

就是以上效果，廢話不多說，上代碼
wxml:

<view class='list_box' wx:for='{{list}}' wx:key='this' wx:for-item='parentItem' wx:for-index='parentIndex' >
<view class='list'>
<view class='list_name_box' catchtap='listTap' data-parentindex='{{parentIndex}}'>
<text class='list_item_name'>{{parentItem.listName}}</text>
<image src='/img/down.png' class='icon_down {{parentItem.show&&"icon_down_rotate"}}'></image>
</view>
<view class='list_item_box' wx:if='{{parentItem.show}}'>
<view class='list_item' wx:for='{{parentItem.item}}' wx:key='this' catchtap='listItemTap' data-index='{{index}}' data-parentindex='{{parentIndex}}'>
<view class='list_item_name_box'>
<text class='list_item_name'>{{item.itemName}}</text>
<image src='/img/down.png' class='icon_down {{item.show&&"icon_down_rotate"}}'></image>
</view>
<view class='other_box' wx:if='{{item.show}}'>
<view class='other'>
<text class='other_title'>內容：</text>
<text class='other_text'>{{item.content}}</text>
</view>
<view class='other'>
<text class='other_title'>時間：</text>
<text class='other_text'>{{item.time}}</text>
</view>
</view>
</view>
</view>
</view></view>

然後wxss:

page{
background: #f3f7f7;}.list_name_box{
background: #fff;
border-bottom: 1px solid #efefef;
display: flex;
height: 90rpx;
align-items: center;
padding: 0 25rpx;
font-size: 32rpx;}.list_item_name{
flex: 1;}.icon_down{
width: 35rpx;
height:35rpx;
transition:transform 0.3s;}/* .list_item_box{
height: 0;
transition:height 0.3s;
overflow: hidden;
}
.list_item_box_show{
height: 500rpx;
} */.list_item_name_box{
background: #fff;
font-size: 30rpx;
height: 80rpx;
display: flex;
align-items: center;
padding: 0 25rpx 0 50rpx;}.other{
display: flex;
height: 80rpx;
padding: 0 25rpx 0 50rpx;
align-items: center;
font-size: 30rpx;
color: #666;}.icon_down_rotate{
transform:rotate(180deg);}

JS:

// pages/dome/dome.jsPage({

/**
* 頁面的初始數據
*/
data: {
list:[
{listName:'列表1',
item:[{
itemName:'子列表1-1',
content:'1-1中的內容',
time: '2015-05-06'
}, {
itemName: '子列表1-2',
content: '1-2中的內容',
time: '2015-04-13'
}, {
itemName: '子列表1-3',
content: '1-3中的內容',
time: '2015-12-06'
}]
},
{
listName: '列表2',
item: [{
itemName: '子列表2-1',
content: '2-1中的內容',
time: '2017-05-06'
}, {
itemName: '子列表2-2',
content: '2-2中的內容',
time: '2015-08-06'
}, {
itemName: '子列表2-3',
content: '2-3中的內容',
time: '2015-11-06'
}]
}, {
listName: '列表3',
item: [{
itemName: '子列表3-1',
content: '3-1中的內容',
time: '2015-05-15'
}, {
itemName: '子列表3-2',
content: '3-2中的內容',
time: '2015-05-24'
}, {
itemName: '子列表1-3',
content: '3-3中的內容',
time: '2015-05-30'
}]
}
]
},
//點擊最外層列表展開收起
listTap(e){
console.log('觸發了最外層');
let Index = e.currentTarget.dataset.parentindex,//獲取點擊的下標值
list=this.data.list;
list[Index].show = !list[Index].show || false;//變換其打開、關閉的狀態
if (list[Index].show){//如果點擊後是展開狀態，則讓其他已經展開的列表變為收起狀態
this.packUp(list,Index);
}

this.setData({
list });
},
//點擊裡面的子列表展開收起
listItemTap(e){
let parentindex = e.currentTarget.dataset.parentindex,//點擊的內層所在的最外層列表下標
Index=e.currentTarget.dataset.index,//點擊的內層下標
list=this.data.list;
console.log(list[parentindex].item,Index);
list[parentindex].item[Index].show = !list[parentindex].item[Index].show||false;//變換其打開、關閉的狀態
if (list[parentindex].item[Index].show){//如果是操作的打開狀態，那麼就讓同級的其他列表變為關閉狀態，保持始終只有一個打開
for (let i = 0, len = list[parentindex].item.length;i<len;i++ ){
if(i!=Index){
list[parentindex].item[i].show=false;
}

}
}
this.setData({list});
},
//讓所有的展開項，都變為收起
packUp(data,index){
for (let i = 0, len = data.length; i < len; i++) {//其他最外層列表變為關閉狀態
if(index!=i){
data[i].show = false;
for (let j=0;j<data[i].item.length;j++){//其他所有內層也為關閉狀態
data[i].item[j].show=false;
}
}
}
},
onLoad: function (options) {

},

/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {

},

/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {

},

/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {

},

/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {

},

/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {

},

/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {

}})

作者：
鏈接：https://www.imooc.com/article/30662
來源：慕課網
本文原創發布於慕課網，轉載請註明出處，謝謝合作

Ⅵ 微信小程序列表輸出問題

這個問題，如果條件允許，最好在後台程序中解決，在後台讀取出圖片路徑數據後，立刻就分割為數組，然後把所有數據按json格式返回給小程序，小程序再把它放入page的data中，這樣小程序無須大的改動就能顯示圖片了。

如果這個辦法行不通，也可以在小程序獲得後台返回的json數據後，先把其中的圖片路徑數據（即用：分隔的多個圖片路徑的字元串）用split分割為數組，再放入page的data中，這樣小程序的wxml文件也不需要大改就能顯示多個圖片了。

如果實在懶得很，後台返回的數據一股腦的直接放到page的data中，那麼還有最後的一種解決辦法，就是在wxml文件中通過小程序自身的wxs語言實時分割路徑字元串，比如（假定圖片欄位名為image）：

<wxsmole="fun">
mole.exports={
imgPathSplit:function(s){
if(s)returns.split(":");
}
}
</wxs>

然後在需要循環顯示圖片的地方加入代碼（只是示例）：

<imagewx:for="{{fun.imgPathSplit(item.image)}}"wx:key="*this"mode="aspectFill"src="{{item}}"></image>

這樣，在小程序渲染頁面時就會實時對路徑字元串進行分割，再循環顯示出圖片來。

具體情況，由於你提供的信息有限，也無法說的更多了，你自己去研究。

Ⅶ 微信小程序有哪些微信小程序名單目錄大全

除了一些游戲沒有外基本都有了吧，可以去雲上小程序上面看看裡面小程序挺全的

Ⅷ 微信小程序列表滑動

這沒辦法，這是程序的bug，不能怎麼辦，這是程序員該想的事情，想玩就忍受或卡死在那，不想玩就退出

Ⅸ 微信小程序怎麼給兩列布局循環數據

如果左右的樣式完全一樣，只用一個view來循環即可，如果左右樣式不同，則需要根據Index判斷奇偶來寫左右兩側的樣式。blockwx:if="{{index%2==0}}"

閱讀全文

微信小程序list列表

與微信小程序list列表相關的閱讀推薦