零基础也能学会的微信小程序制作动态搜索页

布满荆棘的人生 2024-03-31 10:21 64阅读 0赞

### 零基础也能学会的微信小程序制作动态搜索页 ###

## **准备工作：** ##

1.  微信开发者工具
2.  APPID或测试号
3.  创建一个JavaScript基本框架（如下图）  
    ![在这里插入图片描述][f474699a12aa4043ae79f2eee9d28317.png]

### **最终效果：** ###

![在这里插入图片描述][a04b24de89a8430ea05e92b4e653677a.png]

动手做起来吧~

**`index.wxml`**

<view class="container">
      <view class="search">
        <image src="/static/search.png" class="search-image"></image>
        <input type="text" value="猜你想搜~" />
      </view>
    
      <view class="music-List-body-text">
        <view class="Hot-css" />
        <text>热搜榜</text>
      </view>
      <view class="music-List-body">
        
        <view class="music-List">
          <view class="music-List-text">
            <text>不再联系</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
          <view class="music-List-text">
            <text>满天星辰不及你</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
          <view class="music-List-text">
            <text>地铁等待</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
          <view class="music-List-text">
            <text>三生石下</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
          <view class="music-List-text">
            <text>时光你慢些走</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
          <view class="music-List-text">
            <text>死心塌地去爱你</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
          <view class="music-List-text">
            <text>麻雀</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
          <view class="music-List-text">
            <text>雪花飘落的季节</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
          <view class="music-List-text">
            <text>春三月</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
          <view class="music-List-text">
            <text>簇拥烈日的花</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
    
        </view>
        
        <view class="music-List">
          <view class="music-List-text">
            <text>最后的人</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
          <view class="music-List-text">
            <text>天下</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
          <view class="music-List-text">
            <text>落空</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
          <view class="music-List-text">
            <text>不是因为寂寞</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
          <view class="music-List-text">
            <text>今天</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
          <view class="music-List-text">
            <text>时间海</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
          <view class="music-List-text">
            <text>Hayd</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
          <view class="music-List-text">
            <text>或许</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
          <view class="music-List-text">
            <text>沈园外</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
          <view class="music-List-text">
            <text>岁月神偷</text>
            <view class="music-List-text-FU">切，谁先联系谁小狗</view>
          </view>
    
        </view>
      </view>
    </view>

**`index.wxss`**

.search {
        
    	margin-top: 10px;
    	width: 80%;
    	height: 15px;
    	background-color: #f0f0f0b7;
    	border-radius: 30px;
    	/* 上内边距 */
    	padding-top: 25rpx;
    	/* 下内边距 */
    	padding-bottom: 20px;
    	/* 底部外边距 */
    	margin-bottom: 100px;
    }
    .search input {
        
    	color: rgb(139, 139, 139);
    	/* height: 10px; */
    	padding-left: 30px;
    	padding-right: 45px;
    	/* 文本居中 */
    	text-align: center;
    }
    .search-image {
        
    	/* 绝对定位 */
    	margin-top: 1px;
    	position: absolute;
    	width: 20px;
    	height: 20px;
    	/* left: 55px; */
    	right: 55px;
    }
    .music-List-body {
        
    	width: 95%;
    	/* height: 30px; */
    	border-radius: 10px;
    	/* background-color: #eeeeeec0; */
    	/* 横向布局对齐 */
    	display: flex;
    }
    
    .Hot-css {
        
    	position: absolute;
    	/*绝对定位*/
    	width: 5px;
    	margin-top: 6px;
    	height: 15px;
    	background-color: rgb(7, 224, 231);
    	border-radius: 10px;
    }
    
    .music-List-body-text {
        
    	/* position: relative; */
    	/*相对定位*/
    	width: 25%;
    	height: 25px;
    	left: 20px;
    	/* 方便调试 */
    	margin-top: 110px;
    	border-radius: 10px;
    	text-align: center;
    	/* background-color: blanchedalmond; */
    	position: absolute;
    	font-size: 20px;
    }
    
    .music-List {
        
    	/* 便于调试 */
    	/* background-color: rgba(231, 231, 231, 0.418); */
    	width: 95%;
    	/* 外上边距 */
    	/* margin-top: 50px; */
    	/* 外下边距 */
    	margin-bottom: 10px;
    	/* 外左右边距 */
    	margin-left: 1%;
    	margin-right: 1%;
    	/* 内上边距 */
    	padding-top: 1px;
    	/* 内下边距 */
    	/* padding-bottom: 10px; */
    	/* 内左边距 */
    	padding-left: 30px;
    	/* 圆角 */
    	border-radius: 10px;
    	/* 文字居中 */
    	/* text-align: center; */
    }
    
    .music-List-text {
        
    	font-size: 15px;
    	color: #56c2f5;
    	margin-bottom: 10px;
    }
    
    .music-List-text-FU {
        
    	color: rgb(185, 185, 185);
    	font-size: 12px;
    	margin-top: 2px;
    }

**`app.wxss`**

/**app.wxss**/
    .container {
        
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      /* 顶部高度 */
      /* padding: 10px; */
      box-sizing: border-box;
      /* background-color: #f7f7f7; */
    }

快来实现您的视觉效果吧~

[f474699a12aa4043ae79f2eee9d28317.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/1f5244ba99c64a13aa31be1d28624c6e.png
[a04b24de89a8430ea05e92b4e653677a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/8b134c30d493493cb783490b8f7b135a.png