微信小程序 点击变色 跳转页面

420 阅读1分钟

实现点击效果变色,排他思想

                <view wx:for="{{list}}" class="t" wx:key="i" 
                    wx:for-item="r" wx:for-index="i"
                    style="color:{{r.styFlag?'red':''}};"
                    data-i="{{i}}"
                    bindtap="choose"
                >
                    {{r.name}}--{{i}}
                </view>

                
                
                choose:function(e){
                    let { currentTarget:{ dataset:{i} } } = e;
                    /* 第一步获取点击的当前的内容的索引 */
                    console.log(i)
                    /* 排他 把所有的先置空 */
                    this.data.list.forEach(r=>{
                        r.styFlag = false
                    })
                    this.data.list[i].styFlag = true;
                    /* 数据变了 视图没变 必须要使用setData实现数据和视图的双向数据绑定 */
                    this.setData({
                        list:this.data.list
                    })
                },
                
                

微信小程序实现跳转页面

      保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面 
              wx.navigateTo({
                      url: 'url',
              })
    
      跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
               wx.switchTab({
                      url: 'url',
              })
              
      使用redirectTo是无法使用navigateBack返回的*/
      关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。 */
               wx.redirectTo({
                      url: 'url',
              })
              
     关闭所有页面,打开到应用内的某个页面 */
               wx.reLaunch({
                      url: 'url',
              })