切换标签页后还需要改变当前标签页对应的tab-item的样式,将文本颜色和底部的线条颜色设为红色,表示当前标签页处于活跃状态。下面通过判断变量tab的值,来为当前活跃的data-item增加一个active样式,具体代码如下 <viewclass="tab-item {{item==0?'active':''}}"bindtap="changeItem"data-item="0">音乐推荐器</v...
2.事件传值通过标签自定义属性的方式 和value 3.事件触发时获取数据 handleInput: function(e) { //{item:100} console.log(e.currentTarget.dataset) //输入框的值 console.log(e.detail.value); } 样式WXSS wxss是一套样式语言,用于描述WXML的组件样式。 与CSS相比,WXSS扩展的特定有: 1.响应式长度单位 ...
如果要修改页面中某个变量的值,就需要使用this.setData({变量名:值})。 话不多说例子如下: test.wxml: <viewwx:for="{{ editData }}"wx:key="index"data-index="{{ index }}"><viewclass="list-item flex"><viewclass="left">收货人:</view><viewclass="right"></view></view><viewclass="lis...
在我们自定义的组件video-item-v1添加 bindtap 属性,可以直接监听组件的点击。 我们点击不同的组件,会跳转到不同的详情页,那我们如何知道具体是点击了哪个页面呢? ——这里需要在 wxml 中给组件添加一个额外的属性 data-item。 之后在事件处理时,我们就可以通过 data-item 绑定的 item,拿到所点击的组件的 id,...
关于data-方法配合点击事件传参的细节 这里面有几个细节,我们来看一下。 页面A传参:⭐⭐⭐细节一:在本页面进行渲染,这个wx:for相当于vue当中的v-for。将这一部分循环渲染,并且给每个图片标签绑定点击事件activityDetail,每张图片都对应一条数据,每条数据都对应一个唯一标识,也就是id,也就是这里的item.id。
},select:function(e) {varoIndex = e.currentTarget.dataset.index;vararray =this.data.sDate; array.forEach((item,index,arr) =>{varsItem ="sDate["+ index +"].selected";this.setData({ [sItem]:" "})console.log([sItem]);if(index == oIndex) {varoSelected ="sDate["+ index +"]....
--changeItem这个事件是单击按钮时进行切换 --><viewclass="tab-item {{tab==0?'active':''}}"bindtap="changeItem"data-item="0">音乐推荐</view><viewclass="tab-item {{tab==1?'active':''}}"bindtap="changeItem"data-item="1">播放器</view><viewclass="tab-item {{tab==2?'active':'...
item就是小程序默认的前缀,后面的名字是你数组中拿到的属性值的名字 接下来 传参跳转。 mall.wxml: <view class="goods" catchtap="onDetail" data-bzId="{{item._id}}"> 绑定一个onDetail方法,使用data-属性名来绑定该商品的id给bzId 关于data- 官方文档给的解释很明白 ...
tab切换(动态修改data里数组的值) dom: <viewclass="{{ item.isChoose ? 'list_item' : 'special' }}"wx:for="{{ list }}"wx:key="id"bindtap="handleClick"data-index="{{ item.id }}">{{item.title}}</view> css: .list_item{width:238rpx;height:60rpx;line-height:60rpx;text-align:...
// index.jsPage({ data: { list: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' } ] }, onLoad: function () { }})在 JavaScript 文件中，我们可以使用各种方式来初始化数据项，例如从服务器获取数据、从本地缓存获取数...