当前位置：首页 » 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列表相关的阅读推荐