守望轩Wordpress小程序修改记录——首页代码修改-1
最近这个周末有点忙，星期五的时候带我家的小母猫去做了绝育这几天都陪她去换药和输液
今天我要正式开始每天一更啦，最近有些朋友在让我更新一下我的小程序页面的文章，这几天会陆续写出来，不要着急 =￣ω￣=
还有我写的文章和提供代码都是无偿免费的，因为这是一个开源的程序，我只是修改了一些简单的页面代码，我愿意免费分享出来给大家参考，不会存在收费的情况只当是交个朋友，可以加我微信“wasabiidc”，或者留言换个友链什么的都可以，也希望大家不要做出来以后去收别人的钱在分享帮别人做
我原来写过一些文章，但是折腾来折腾去都没有了，以后会经常更新一些技术上的干货（我认为），都是我在使用一些程序和碰见的代码问题
好了不啰嗦了进入正题，今天写的守望轩Wordpress小程序首页
1.首页凸起样式幻灯片
我们需要找到小程序页面路径 pages/index/index
打开index.wxml替换以下代码
源代码
<view class="index-header" style="display:{{displaySwiper}}">
<swiper class="index-swiper" indicator-dots="true" interval="10000" autoplay="true" indicator-color="rgba(255, 255, 255, .2)" indicator-active-color="rgba(255, 255, 255, .7)">
<block wx:key="id" wx:for="{{postsShowSwiperList}}">
<swiper-item id="{{item.id}}" index="{{index}}" data-redicttype="{{item.type}}" data-appid="{{item.appid}}" data-url="{{item.url}}" bindtap="redictAppDetail">
<image mode="aspectFill" src="{{item.post_medium_image}}" style="width:100%" />
<view class="swiper-mask"></view>
<view class="swiper-desc">
<text>{{item.post_title}}</text>
</view>
</swiper-item>
</block>
</swiper>
</view>替换后
<view class="index-header" style="display:{{displaySwiper}}">
<swiper class="index-swiper" indicator-dots="" interval="10000" autoplay="true" indicator-color="rgba(255, 255, 255, .2)" indicator-active-color="rgba(255, 255, 255, .7)" previous-margin="30rpx" next-margin="50rpx" circular="true" bindchange="handleChange">
<block wx:key="id" wx:for="{{postsShowSwiperList}}">
<swiper-item id="{{item.id}}" index="{{index}}" data-redicttype="{{item.type}}" data-appid="{{item.appid}}" data-url="{{item.url}}" bindtap="redictAppDetail" style="">
<view wx:if="{{item.post_thumbnail_image}}">
<image class="itemImg {{currentIndex == index ? 'active': ''}}" mode="aspectFill" src="{{item.post_thumbnail_image}}" style="width:96%;margin:0 24rpx;border-radius:8rpx" />
</view>
<view wx:else>
<image class="itemImg {{currentIndex == index ? 'active': ''}}" mode="aspectFill" src="{{item.content_first_image}}" style="width:96%;margin:0 24rpx;border-radius:8rpx" />
</view>
</swiper-item>
</block>
</swiper>
</view>接下来打开index.wxss替换以下代码
源代码
.index-container {
/* padding: 0 24rpx; */
background-color: #fff;
}
.index-header {
text-align: center;
font-weight: normal;
font-size: 30rpx;
line-height: 40rpx;
color: #757575;
/* margin-top: 5rpx; */
}
/* index swiper */
swiper.index-swiper {
position: relative;
height: 420rpx;
}
swiper .swiper-mask {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
}
swiper image {
display: block;
width: 100%;
height: 100%;
}
swiper .swiper-desc {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0)0%, rgba(63, 76, 88, 0.3)100%);
color: #fff;
line-height: 150rpx;
margin: 0 auto;
font-weight: 700;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 30rpx;
/* height: 120rpx; */
text-shadow: 0px 0px 16px #646d75;
}替换后
.index-container {
background-color: #fff;
}
.index-header {
text-align: center;
font-weight: normal;
font-size: 30rpx;
line-height: 40rpx;
color: #757575;
}
.scroll-view {
width: 100%;
white-space: normal;
}
swiper.index-swiper {
position: relative;
height: 420rpx;
margin: 24rpx 0;
}
swiper .swiper-mask {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
}
swiper image {
display: block;
width: 100%;
height: 100%;
}
swiper .itemImg {
position: absolute;
width: 100%;
height: 380rpx;
z-index: 5;
opacity: 0.7;
top: 4.3%;
}
swiper .active {
opacity: 1;
z-index: 10;
height: 420rpx;
transition: all 0.2s ease-in 0s;
top: 0%;
}
swiper .swiper-desc {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0)0%, rgba(63, 76, 88, 0.3)100%);
color: #fff;
line-height: 150rpx;
margin: 0 auto;
font-weight: 700;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 26rpx;
text-shadow: 0px 0px 16px #646d75;
}然后打开index.js加入以下代码
handleChange: function (e) {
this.setData({
currentIndex: e.detail.current
})
},
onShow: function (options) {
wx.setStorageSync('openLinkCount', 0);
},不知道加在哪可以加在获取文章列表数据代码的上面
幻灯片就搞定啦！
2.去掉导航下面的长方形块状分类
打开index.wxml
注释掉以下代码
<!-- <view class='top-Nav2'>
<navigator url='../hot/hot' hover-class='none'>
<view class="top-Nav2-item">
<view class="top-Nav2-item-word">
<text>排行榜单</text>
</view>
</view>
</navigator>
<navigator url="../../pages/list/list?categoryID=1059" hover-class='none'>
<view class="top-Nav2-item2">
<view class="top-Nav2-item-word">
<text>微信小程序</text>
</view>
</view>
</navigator>
</view> -->3.将搜索栏更改到上方并且加背景颜色
首先打开index.wxml
找到以下代码
<form catchsubmit="formSubmit" catchreset="formReset" id="search-form">
<view class="search-pancel">
<input value="" id="search-input" name="input" confirm-type="search" class="search-input" placeholder="搜索你感兴趣的内容..." bindconfirm="formSubmit"></input>
<button class="search-button" form-type="submit" size="mini" plain="true">
<icon type="search" color="#959595" size="12" />
</button>
</view>
</form>把这段代码粘贴到
<import src="../../templates/copyright.wxml" />的下面，就可以把搜索框加到最上面了，然后是改颜色
打开index.wxss替换下面代码
源代码
.search-button {
border-left: 0 !important;
border-top: 1px solid #fff !important;
border-right: 1px solid #fff !important;
border-bottom: 1px solid #fff !important;
background-color: #fff !important;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: #296fd0 !important;
width: 20%;
margin: 0 !important;
box-shadow: 1px 1px 6px #ecf0f0;
}
.search-button icon {
position: absolute;
margin: 28rpx 16rpx;
}
.search-input {
background-color: #fff;
padding: 16rpx 0 16rpx 32rpx;
min-height: 1rem;
font-size: 30rpx;
/* position: absolute;*/
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
/* border: 1px solid #ededed; */
border-right: 0 !important;
height: 48rpx;
width: 80%;
text-align: left;
box-shadow: 1px 1px 6px #ecf0f0;
}
.share-button {
border: 1px solid #eee !important;
color: #296fd0 !important;
left: 10rpx;
height: 100rpx;
width: 200rpx;
}
.search-pancel {
display: flex;
flex-direction: row;
background-color: #eee;
padding: 24rpx 24rpx;
}
.search-pancel image {
width: 50rpx;
height: 50rpx;
margin-left: 20rpx;
vertical-align: middle;
}替换后
.search-button {
border-left: 0 !important;
border-top: 1px solid #fff !important;
border-right: 1px solid #fff !important;
border-bottom: 1px solid #fff !important;
background-color: #fff !important;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 60px;
border-bottom-right-radius: 60px;
color: #296fd0 !important;
width: 20%;
margin: 0 !important;
}
.search-button icon {
position: absolute;
margin: 28rpx 16rpx;
}
.search-input {
background-color: #fff;
padding: 16rpx 0 16rpx 32rpx;
min-height: 1rem;
font-size: 30rpx;
border-bottom-left-radius: 60px;
border-top-left-radius: 60px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0 !important;
height: 48rpx;
width: 80%;
text-align: left;
}
.share-button {
border: 1px solid #eee !important;
color: #118fff !important;
left: 10rpx;
height: 100rpx;
width: 200rpx;
}
.search-pancel {
display: flex;
flex-direction: row;
background-color: #118fff;
padding: 24rpx;
}
.search-pancel image {
width: 50rpx;
height: 50rpx;
margin-left: 20rpx;
vertical-align: middle;
}背景颜色可以根据你自己的window窗口进行修改，我上面是默认样式的颜色
搜索栏就搞定了
今天的首页改造就写到这了，下一期或者大下期或者大大下期，更新首页改造2，图文显示样式等等，如果在小程序里面看代码费劲，可以直接访问本文连接“原文链接”在浏览器里面打开，进行复制更改
还是那句话我分享给你是免费的，也希望你分享给别人也是免费的不要拿来赚钱，这是一个开源的程序谢谢Jianbo大佬
今天就到这了
END拜拜ヾ(•ω•`)o
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
![微擎小程序 [精美企业公司官网小程序]](https://www.madapang.com/wp-content/uploads/2019/11/1573238836-we7-297x200.jpg)