problem description

multiple components (modules) are customized under one page

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)

//wxml
<scroll-view class="run_are" scroll-x="true">
    <view class="nav_item {{Index==0?"sel":""}}" data-i="0" bindtap="c_index"></view>
    <view class="nav_item {{Index==1?"sel":""}}" data-i="1" bindtap="c_index"></view>
    <view class="nav_item {{Index==2?"sel":""}}" data-i="2" bindtap="c_index"></view>
    <view class="nav_item {{Index==3?"sel":""}}" data-i="3" bindtap="c_index"></view>
    <view class="nav_item {{Index==4?"sel":""}}" data-i="4" bindtap="c_index"></view>
  </scroll-view>
<view>
  <!---->
  <view wx:if="{{Index==0}}">
    <default>
      
    </default>
  </view>
  <!--1-->
  <view wx:if="{{Index==1}}">
    <theOne>
      
    </theOne>
  </view>
</view>

//JSON
{
  "usingComponents": {
    "basic": "../../../components/basic/basic",
    "hose": "../../../components/hose/hose"
  }
}

//js
c_index: function (event){
    var i = event.currentTarget.dataset.i;
    console.log(i);
    if (this.data.Index!=i){
      this.setData({
        Index: i,
      });
    }
    console.log(this.data.Index);
  }

what result do you expect? What is the error message actually seen?

Click a category in scroll-view to switch between the following modules

now I have found a way, and found that the previous implementation is wrong (I confused the functions of the component and the template, or did not understand the difference between the two in Mini Program), and now I use the template method:

then introduce the template page
< import src= ".. / template/template/template.wxml" / >

in the display page.

.

< view >