小程序简单的搜索栏

<!--pages/search/searchwxml-->

<van-search

  value="{{ value }}"

  placeholder="请输入搜索关键词"

  show-action

  input-align="center"

  bind:search="onSearch"

  bind:cancel="onCancel"

  bind:change="onChange"

    background="#4fc08d"

/>

<ListItem itemList="{{itemList}}" />

<view wx:if="{{kong}}" style="padding: 20px;text-align: center;">无更多数据</view>

<van-toast id="van-toast" />

{

  "usingComponents": {

    "van-search": "@vant/weapp/search/index",

    "ListItem":"/components/ListItem/ListItem",

    "van-toast": "@vant/weapp/toast/index"

  },

  "navigationBarTitleText": "搜索",

  "enablePullDownRefresh": true,

  "onReachBottomDistance": 0

}

const { goods>

效果图

wxml页面

<!-- nav导航 -->

<view class="goods">

  <block wx:for="{{tab}}" wx:key="key">

    <view class="{{itemstyle}}" bindtap="tarClick" data-index="{{index}}">{{itemtitcle}}</view>

  </block>

</view>

<!--导航下  视图滑块 -->

<swiper bind:change="changeTab" current="{{index}}">

   <block>

     <swiper-item>

     <text>11111</text>

     </swiper-item>

     <swiper-item>

     <text>2222</text>

     </swiper-item>

     <swiper-item>

     <text>3333</text>

     </swiper-item>

   </block>

</swiper>

js页面

Page({

    data: {

       tab:[

         {titcle:"商品参数",style:"color"}, 

         {titcle:"商品介绍",style:""},

         {titcle:"商品规格",style:""},

        ],

        index:0,

       goods:''

    },

       tarClick(e){

          //  consolelog(ecurrentTargetdatasetindex)

           let tab = thisdatatab;

          let that = this;

          let index = ecurrentTargetdatasetindex

           consolelog(index)

          tabmap((item,key)=>{

           if(key==index)

           {

              tab[key]['style']='color';

           }else{

             tab[key]['style']='';

           }

          })

          thatsetData({tab,index})

       },changeTab(e){

          consolelog(edetailcurrent)

          let tab = thisdatatab;

          let that = this;

          let index = edetailcurrent

           consolelog(index)

          tabmap((item,key)=>{

           if(key==index)

           {

              tab[key]['style']='color';

           }else{

             tab[key]['style']='';

           }

          })

          thatsetData({tab,index})

       },

}）

wxss页面

/ pages/details/detailswxss /

goods{

    width: 100%;

    height: 100rpx;

    / background-color:yellowgreen; /

    display:flex;

    justify-content: space-around;

    align-items: center;

}

goods view{

    width: 160rpx;

    height: 100rpx;

    display: flex;

    justify-content: center;

    align-items: center;

}

color{

    color: red;

    border-bottom: 2px solid red;

}

照着腾讯文档小程序开发了微信小程序富文本编辑器组件，这几天做个整理，如有这个需求可以前往腾讯文档小程序 *** 作看看实际效果。毕竟参照的是微信自家小程序，无法做到百分百效果，只能按现有开放api尽可能实现。

项目地址：

>

<view>父组件msg的值:{{msg}}</view>

<Header msg="{{msg}}" bindchildChange="change" ></Header>

<block wx:for="{{list}}" wx:key="index">

<ListItem rItem="{{item}}" bindchildGO="childGO"></ListItem>

</block>

<Header  msg="{{msg}}"></Header>

/ pages/list/listwxss /

item{

    padding: 5px;

}

img1{

    width: 120px;

    height: 120px;

    border-radius: 5px;

}

row{

    flex: 1;

    height: 120px;

}

title{

    padding: 10px;

}

dec{

    padding:0 10px;

}

// pages/list/listjs

Page({

    /

      页面的初始数据

     /

    data: {

        msg:"你是我的小宝贝",

     list:[{

         url:">

官网： >

以上就是关于小程序简单的搜索栏全部的内容，包括:小程序简单的搜索栏、微信小程序rich-text中的nodes属性、微信小程序 导航栏切换视图等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！