零基础也能学会的微信小程序制作动态搜索页_佛系豪豪的博客-爱代码爱编程
零基础也能学会的微信小程序制作动态搜索页
准备工作:
- 微信开发者工具
- APPID或测试号
- 创建一个JavaScript基本框架(如下图)
最终效果:
动手做起来吧~
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; */
}
快来实现您的视觉效果吧~